Jquery和angularjs获取check框选中的值的方法汇总
在我们平常的开发中，有时候会需要获取一下check框选中的值，以及check框选中行的所有信息。这个时候有一个小技巧那就是我们可以把要获取的信息全部放到check框的值里面，这样我们可以获取check框选中值的时候也就相当于获取了当前行的信息。
<td><inputclass="states"type="checkbox" name="orders" value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/></td>
全选全不选：
varbischecked=$('#cboxchecked').is(':checked');
varfruit=$('input[name="orders"]');
fruit.prop('checked',bischecked);
这里为什么要用prop而不用attr,这是因为
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
获取选中的值:
$('input[name="orders"]:checked').each(function(){
varsfruit=$(this).val();
varorders=sfruit.split(",");
varreminder=newObject();
reminder.merchantId=orders[0];
reminder.orderCode=orders[1];
reminder.userId=orders[2];
});
angularjs实现:
使用angularjs我们不用去操作dom,我们只需要去关心这个值的状态;
首先看一下html代码：
<!DOCTYPEhtml>
<htmldata-ng-app="App">
<head>
<scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<scriptsrc="script2.js"></script>
</head>
<bodydata-ng-controller="AddStyleCtrl">
<div>ChooseTags</div>
<div>
<div>Youhavechoosen:</div>
<hr>
<labeldata-ng-repeat="selectedTaginselectedTags">
(({{selectedTag}}))
</label>
<hr>
<divdata-ng-repeat="categoryintagcategories">
<div>{{category.name}}</div>
<divdata-ng-repeat="tagincategory.tags">
<div>
<inputtype="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定义了AngularJSApp；
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）
/**
*Createdbyzhon20/05/15.
*/
//Codegoeshere
variApp=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=[];
varupdateSelected=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){
varidx=$scope.selected.indexOf(id);
$scope.selected.splice(idx,1);
$scope.selectedTags.splice(idx,1);
}
}
$scope.updateSelection=function($event,id){
varcheckbox=$event.target;
varaction=(checkbox.checked?'add':'remove');
updateSelected(action,id,checkbox.name);
}
$scope.isSelected=function(id){
return$scope.selected.indexOf(id)>=0;
}
});