jquery操作多选框checkbox的方法,如全选,反选,选择指定项,读取选中项的值等[附在线实例演示]推荐 亲测 原创 收藏

文章标签: checkbox jquery 表单
  • :
  • 06-25 14:32
  • :
  • 544次
  • :
  • 0条
  • 2赞

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

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

jquery操作多选框checkbox的各种方法的在线实例演示

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

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

1.全选:

<script language="javascript">
$("#quanxuan").click(function(){
	$(":checkbox[name='aijquery']").prop("checked",true);	
});
</script>

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

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

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

2.全不选:

<script language="javascript">
$("#quanbuxuan").click(function(){
	$(":checkbox[name='aijquery']").removeProp("checked");	
});
</script>

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

3.选择偶数项:

<script language="javascript">
$("#xuanoushu").click(function(){
	$(":checkbox[name='aijquery']:odd").prop("checked",true);	
});
</script>

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

4.先择奇数项:

<script language="javascript">
$("#xuanoushu").click(function(){
	$(":checkbox[name='aijquery']:even").prop("checked",true);	
});
</script>

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

5.选择指定第几项:

<script language="javascript">
$("#xuan").click(function(){
	var n=$("#num").val();
	if(!isNaN(n)){
		$(":checkbox[name='aijquery']").eq(n-1).prop("checked",true);
	}else{alert("请输入数字");}	
});
</script>

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

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

<script language="javascript">
$("#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("请输入数字");}	
});
</script>

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

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

<script language="javascript">
$("#DuZhi").click(function(){
	var v=[];
	$(":checkbox[name='aijquery']:checked").each(function(){
		v.push($(this).val());	
	});	
	alert(v.toString());	
});
</script>

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



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 11:14:17