jqury简易实现checkbox反选与全选

Posted 2020-09-16

前段时间，一个同事让我帮忙写个全选与反选的功能，本来一段很简单的代码，突然卡顿，写了好几个小时，其实之前也做过类似的功能，只是一下子就懵逼了，简而言之还是自己对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>