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