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专题》。
您正在找的文章可能是: