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

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

代码如下:

Box" name="orders" value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/>

全选全不选：

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

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

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

rush:js;"> $('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代码：

rush:xhtml;"> Choose Tags

You have choosen:

 <label data-ng-repeat="selectedTag in selectedTags"&gt; 
   (({{selectedTag}})) 
 </label> 

 <div data-ng-repeat="category in tagcategories"&gt; 
   <div>{{ category.name }}</div> 
   <div data-ng-repeat="tag in category.tags"&gt; 
     <div> 
       <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)"&gt; 
       {{ tag.name }} 
     </div> 
   </div> 

 </div> 

{{selected|json}}

{{selectedTags|json}}

line2 定义了AngularJS App； line4 引入angularjs脚本； line5 引入自己写的script2.js脚本； line7 指定控制器AddStyleCtrl line13-15 实时显示已选标签给用户看； line17-line26 使用双重循环列出数据库（本例中就存储在了controller的一个对象里）中的数据； line21的这行代码作用可大了：Box" 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）

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,checkbox.name);
}

$scope.isSelected = function(id){
return $scope.selected.indexOf(id)>=0;
}
});