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

前端之家收集整理的这篇文章主要介绍了Jquery和angularjs获取check框选中的值的方法汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

代码如下:
Box" name="orders" value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/>

全选全不选:

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

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

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

});

angularjs实现:

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

Choose Tags
You have choosen:


{{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;
}
});

猜你在找的jQuery相关文章