Jquery和angularjs获取check框选中的值的方法汇总


Posted in Javascript onJanuary 17, 2016

在我们平常的开发中,有时候会需要获取一下check框选中的值,以及check框选中行的所有信息。这个时候有一个小技巧那就是我们可以把要获取的信息全部放到check框的值里面,这样我们可以获取check框选中值的时候也就相当于获取了当前行的信息。

<td><input class="states" type="checkbox"  name="orders"  value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/></td> 

全选全不选:

var bischecked=$('#cboxchecked').is(':checked'); 
    var fruit=$('input[name="orders"]'); 
    fruit.prop('checked',bischecked);

这里为什么要用prop而不用attr,这是因为

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
获取选中的值:

$('input[name="orders"]:checked').each(function(){ 
      var sfruit=$(this).val(); 
      var orders=sfruit.split(","); 
      var reminder=new Object(); 
      reminder.merchantId=orders[0]; 
      reminder.orderCode=orders[1]; 
      reminder.userId=orders[2]; 
  
      });

angularjs实现:

使用angularjs我们不用去操作dom,我们只需要去关心这个值的状态;
首先看一下html代码:

<!DOCTYPE html> 
 <html data-ng-app="App"> 
 <head> 
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
   <script src="script2.js"></script> 
 </head> 
 <body data-ng-controller="AddStyleCtrl"> 
  
   <div>Choose Tags</div>   
   <div> 
     <div>You have choosen:</div> 
     <hr> 
     <label data-ng-repeat="selectedTag in selectedTags"> 
       (({{selectedTag}})) 
     </label> 
     <hr> 
     <div data-ng-repeat="category in tagcategories"> 
       <div>{{ category.name }}</div> 
       <div data-ng-repeat="tag in category.tags"> 
         <div> 
           <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)"> 
           {{ tag.name }} 
         </div> 
       </div> 
       <hr> 
     </div> 
   </div> 
  
 <pre>{{selected|json}}</pre> 
 <pre>{{selectedTags|json}}</pre> 
  
 </body> 
 </html>

line2 定义了AngularJS App;
line4 引入angularjs脚本;
line5 引入自己写的script2.js脚本;
line7 指定控制器AddStyleCtrl
line13-15 实时显示已选标签给用户看;
line17-line26 使用双重循环列出数据库(本例中就存储在了controller的一个对象里)中的数据;
line21的这行代码作用可大了:<inputtype="checkbox" id={{tag.id}}name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">

存储了tag的id,name,利用isSelected(tag.id)来判断是否被checked,点击时候调用updateSelection($event,tag.id)方法;

如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入event。因为在Angularjs里面,这个地方的this是 scope 。我们可以传入 event,然后在函数里面通过 event.target 来获取到该元素。
line29-30 是测试时候给自己看的,可以看到selected数组和selectedTags数组中的内容;

然后看看AngularJS代码:(script2.js)

/** 
 * Created by zh on 20/05/15. 
 */ 
// Code goes here 
 
var iApp = angular.module("App", []); 

iApp.controller('AddStyleCtrl', function($scope) 
{ 
  $scope.tagcategories = [ 
    { 
      id: 1, 
      name: 'Color', 
      tags: [ 
        { 
          id:1, 
          name:'color1' 
        }, 
        { 
          id:2, 
          name:'color2' 
        }, 
        { 
          id:3, 
          name:'color3' 
        }, 
        { 
          id:4, 
          name:'color4' 
        }, 
      ] 
    }, 
    { 
      id:2, 
      name:'Cat', 
      tags:[ 
        { 
          id:5, 
          name:'cat1' 
        }, 
        { 
          id:6, 
          name:'cat2' 
        }, 
      ] 
    }, 
    { 
      id:3, 
      name:'Scenario', 
      tags:[ 
        { 
          id:7, 
          name:'Home' 
        }, 
        { 
          id:8, 
          name:'Work' 
        }, 
      ] 
    } 
  ]; 
 
  $scope.selected = []; 
  $scope.selectedTags = []; 
 
  var updateSelected = function(action,id,name){ 
    if(action == 'add' && $scope.selected.indexOf(id) == -1){ 
      $scope.selected.push(id); 
      $scope.selectedTags.push(name); 
    } 
    if(action == 'remove' && $scope.selected.indexOf(id)!=-1){ 
      var idx = $scope.selected.indexOf(id); 
      $scope.selected.splice(idx,1); 
      $scope.selectedTags.splice(idx,1); 
    } 
  } 
 
  $scope.updateSelection = function($event, id){ 
    var checkbox = $event.target; 
    var action = (checkbox.checked?'add':'remove'); 
    updateSelected(action,id,checkbox.name); 
  } 
 
  $scope.isSelected = function(id){ 
    return $scope.selected.indexOf(id)>=0; 
  } 
});
Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
javascript中scrollTop详解
Apr 13 Javascript
js比较日期大小的方法
May 12 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
You might like
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
探讨如何把session存入数据库
2013/06/07 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
基于Python os模块常用命令介绍
2017/11/03 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
wxPython实现画图板
2020/08/27 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Keras loss函数剖析
2020/07/06 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
导购员的岗位职责
2014/02/08 职场文书
2014年统战工作总结
2014/12/09 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript