jq多选按钮值_jquery操作多选框checkbox的方法，如全选，反选，选择指定项，读取选中项的值等[附在线实例演示]...

jquery操作多选框checkbox的方法，如全选，反选，选择指定项，读取选中项的值等[附在线实例演示]

文章标签: 表单 checkbox

:

04-01 20:45

:

2429次

:

0条

9赞

点赞

简介jquery里对多先框checkbox进行各种操作，如全选、全不选、反选、选取偶数项、选取奇数项、选取指定的值及读取选中项的值等各种操作的方法及在线实例演示。

本文站长和大家总结一下jquery里对多选框checkbox的各种操作方法，包括全选，全不选，反选，选中指定的值和读取选中项的值等各种操作，大家可以先看下面的这个在线实例演示：

下面是上面在线实例的截图：

下面站长来给大家说说第一种操作的具体方法：

1.全选：

$("#quanxuan").click(function(){

$(":checkbox[name='aijquery']").prop("checked",true);

});

$(":checkbox")指的是获取所有的checkbox多选框；

$(":checkbox[name='aijquery']")指的是读取所有名字为aijquery的checkbox多选框；

prop("checked",true)指给获取到的元素标签添加一个名字为checked的属性，值为true，就是选中的意思；

2.全不选：

$("#quanbuxuan").click(function(){

$(":checkbox[name='aijquery']").removeProp("checked");

});

全不选和上面的全选基本上一样，只是用removeProp清除了元素的checked属性；

3.选择偶数项：

$("#xuanoushu").click(function(){

$(":checkbox[name='aijquery']:odd").prop("checked",true);

});

$(":checkbox[name='aijquery']:odd")是指获取名字为aijquery的所有checkbox多选框的偶数项；

4.先择奇数项：

$("#xuanoushu").click(function(){

$(":checkbox[name='aijquery']:even").prop("checked",true);

});

$(":checkbox[name='aijquery']:even")是指获取名字为aijquery的所有checkbox多选框的偶数项；

5.选择指定第几项：

$("#xuan").click(function(){

var n=$("#num").val();

if(!isNaN(n)){

$(":checkbox[name='aijquery']").eq(n-1).prop("checked",true);

}else{alert("请输入数字");}

});

$(":checkbox[name='aijquery']").eq()表示选择所有名字为aijquery的checkbox多选框，并读取指定第某个项，因为是从0开始计数的，但是实际当中我们是从1开始计数的，所以才要减1；

6.选择指定第几项后，并清除其它选定的项：

$("#xuan2").click(function(){

var n=$("#num2").val();

if(!isNaN(n)){

$(":checkbox[name='aijquery']").eq(n-1).prop("checked",true).siblings(":checked").removeProp("checked");

}else{alert("请输入数字");}

});

我们要实现选中某一项后，把其余选中的项清除选中，就要用到jquery里的siblings了，它是用来选择同辈元素标签，siblings(":checked")指的是同辈里处于选中状态的元素。

7.读取所有选中项的checkbox的值：

$("#DuZhi").click(function(){

var v=[];

$(":checkbox[name='aijquery']:checked").each(function(){

v.push($(this).val());

});

alert(v.toString());

});

上面这句没有什么要说的，先声明一个数组，然后用push把所有选中项的checkbox的值添加到数组里，然后可以用toString()命令再把数组转换成字符串形式的。

如果想了解更多关于jquery里对checkbox的操作，可看本站的《checkbox专题》。

您正在找的文章可能是：