首页 > 代码库 > jqury简易实现checkbox反选与全选

jqury简易实现checkbox反选与全选

前段时间,一个同事让我帮忙写个全选与反选的功能,本来一段很简单的代码,突然卡顿,写了好几个小时,其实之前也做过类似的功能,只是一下子就懵逼了,简而言之还是自己对checkbox的反选与全选没有掌握十足,所以再利用一些时间重复巩固了这个小功能,代码不长,想到了就简单,没想到就折腾好久。

就自己遇到一些坑,关于checkbox细谈一二,今天只用jquery实现

下面是html代码

技术分享
<p><label><input type="checkbox" class="selectAll"/>全选</label></p>
  	<p><label><input type="checkbox" name="item"/>1</label></p>
  	<p><label><input type="checkbox" name="item"/>2</label></p>
  	<p><label><input type="checkbox" name="item"/>3</label></p>
  	<p><label><input type="checkbox" name="item"/>4</label></p>



	<p>
		<label><input type="checkbox" class="sel"/>全选</label>
		<label><input type="checkbox" name="items"/>5</label>
		<label><input type="checkbox" name="items"/>6</label>
		<label><input type="checkbox" name="items"/>7</label>
		<label><input type="checkbox" name="items"/>8</label>
	</p>
  	<p>
		<label><input type="checkbox" class="sel"/>全选</label>
		<label><input type="checkbox" name="items"/>9</label>
		<label><input type="checkbox" name="items"/>10</label>
		<label><input type="checkbox" name="items"/>11</label>
		<label><input type="checkbox" name="items"/>12</label>
		<label><input type="checkbox" name="items"/>13</label>
	</p>
  	<p>
		<label><input type="checkbox" class="sel"/>全选</label>
		<label><input type="checkbox" name="items"/>a</label>
		<label><input type="checkbox" name="items"/>b</label>
		<label><input type="checkbox" name="items"/>c</label>
		<label><input type="checkbox" name="items"/>d</label>
	</p>
  	<p>
		<label><input type="checkbox" class="sel"/>全选</label>
		<label><input type="checkbox" name="items"/>ded</label>
		<label><input type="checkbox" name="items"/>ded</label>
		<label><input type="checkbox" name="items"/>3ded</label>
	</p>

以下是js代码

<script type=‘text/javascript‘>
  		(function(){
  			
  			$(".selectAll").click(function(){
  				$("input[name=item]").prop("checked",this.checked)	
  			});
			$("input[name=item]").on("click",function(){
				var k = 0;
				$("input[name=item]").each(function(i,item){
					if(item.checked){
						k++;
					}
					if(k == $("input[name=item]").length){
						$(".selectAll").prop("checked",true)
					}else{
						$(".selectAll").prop("checked",false)
					}
				})
			});
			//针对另外一种场景
			$(".sel").click(function(){
				$(this).parent().nextAll().find("input[name=items]").prop("checked",this.checked);
			});
			$("input[name=items]").click(function(){
				var items = $(this).parent().parent().find("input[name=items]");
				
					var j = 0;//定义一个变量
					for(var i=0;i<items.length;i++){
						if(items[i].checked){
							j++;
						}
					};
					//用j的值与items的长度做比较,如果j的值等于items的长度,则说明全选
					if(j==items.length){
						$(this).parent().parent().find(".sel").prop("checked",true)
					}else{
						$(this).parent().parent().find(".sel").prop("checked",false)
					}
				
			
				
			})

	
  		})()

  	</script>

  具体实现效果如下图:

技术分享

在全选中是有坑的,当你使用在使用jqery中的attr方法时,你的全选和反选只能生效一次,再次重复点击时,就会无效。

技术分享
1 $(".selectAll").click(function(){
2                   $("input[name=item]").attr("checked",this.checked)    
3               });
View Code

此时你看到的效果就是这样的:

技术分享

其实用attr()方法给checkbox作为全选与反选是存在问题的,当重复点击全选按钮,所有的的item中的checked只能动态改变一次,而不是你点击全选按钮就能重复改变item的checked的值。

综上所述:关于checkbox在全选与反选时,还是尽量使用jquery中提供的prop()方法,这样避免了和我当初一样,懵逼半天。

关于点击子chekbox选项,当所有checkbox都选上时,全选按钮才选上,只要有一个item的checkbox没选上,全选按钮就不选上,这里巧妙的利用一个变量值与所有items的长度做比较,如果条件里面仅用一个布尔值做判断,则会存在覆盖问题,这里的坑可以自己尝试一下,功能做完了,理解起来不是那么困难,以上代码根据自己适合的场景做修改即可。

<script type=‘text/javascript‘>  (function(){    $(".selectAll").click(function(){  $("input[name=item]").prop("checked",this.checked)  });$("input[name=item]").on("click",function(){var k = 0;$("input[name=item]").each(function(i,item){if(item.checked){k++;}if(k == $("input[name=item]").length){$(".selectAll").prop("checked",true)}else{$(".selectAll").prop("checked",false)}})});//针对另外一种场景$(".sel").click(function(){$(this).parent().nextAll().find("input[name=items]").prop("checked",this.checked);});$("input[name=items]").click(function(){var items = $(this).parent().parent().find("input[name=items]");var j = 0;//定义一个变量for(var i=0;i<items.length;i++){if(items[i].checked){j++;}};//用j的值与items的长度做比较,如果j的值等于items的长度,则说明全选if(j==items.length){$(this).parent().parent().find(".sel").prop("checked",true)}else{$(this).parent().parent().find(".sel").prop("checked",false)}})
  })()
  </script>

jqury简易实现checkbox反选与全选