jQuery实现checkbox全选，反选

jQuery代码

//checkbox全选

$("#checkall").click(function() {

//$('input[name="subbox"]').attr("checked",this.checked);

$('input[name="subbox"]').prop("checked",this.checked);

});

var $subbox = $("input[name='subbox']");

$subbox.click(function(){

$("#checkall").attr("checked",$subbox.length == $("input[name='subbox']:checked").length ? true : false);

});

 反选

$("#checkinverse").click(function() {

        $("input[name='subbox']").each(function(){

            $(this).prop("checked",!this.checked);              

        });

        if($("input[name='subbox']:checked").length<1){

            $("#checkall").prop("checked",false);

        }

    });

 

html代码：

<input type="checkbox" id="checkall">

<input type="checkbox" id="checkinverse">

<input type="checkbox" name="subbox">

 <input type="checkbox" name="subbox">

 <input type="checkbox" name="subbox">

全选使用attr只有第一次生效，改为$('input[name="subbox"]').prop("checked",this.checked);

 

prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的，用来区别之前的.attr()方法.

区别最大的一点就是：布尔型的属性，1.6以后都是用.prop()方法就好了。
这个布尔型的属性，再解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();