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>

　　具体实现效果如下图：

jqury简易实现checkbox反选与全选

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

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

View Code

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

jqury简易实现checkbox反选与全选

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

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

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

秒客网

jqury简易实现checkbox反选与全选

相关文章