Jquery 属性attr("checked") 特性prop("checked") 全选问题

 

$("#chkAll").bind("change",function(){  
        $("input[type='checkbox']").attr("checked", $("#chkAll").attr("checked"));  
}); 

 

        使用上述代码最全选/取消全选时发现，$("#chkAll").attr("checked")返回的是checked或者是undefined，不是原来的true和false了，将控制元素设置上checked属性如：$("#chkAll").attr("checked")，这时发现无论如何值都为true。于是查阅http://api.jquery.com/attr/发现其中有如下描述：

 

    As of jQuery 1.6, the .attr() method returns undefined for attributes that have  
 not been set. To retrieve and change DOM properties such as the checked,   
selected, or disabled state of form elements, use the .prop() method.  

 

         也就是说，这样写在JQ1.6之前完全没问题，可是当我们升级JQ1.6到更高的版本时，我们会发现： 

$('#chkAll').attr('checked'); 返回的是checked或者是undefined，不是原来的true和false了。 
并且checked属性在页面初始化的时候已经初始化好了，不会随着状态的改变而改变。所以如果checkbox一开始是选中的，那么返回的是checked，如果一开始没被选中，则返回的是undefined。 

 

分析了其中的原因，可以这样理解： 

 

        它将“属性”与“特性”做了区别，属性指的是“name, id, type, style”等等，特性指的是“selectedIndex, tagName, nodeName, disabled, checked, selected”等等。 
JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性

 

$("#chkAll").attr("checked"); //undefined 
$("#chkAll").prop("checked"); //true

$("#chkAll").bind("change",function(){
        $("input[type='checkbox']").prop("checked", $("#chkAll").prop("checked"));
});  

 

 

综合参考于：

http://zlj214.iteye.com/blog/2003343

http://www.jb51.net/article/41993.htm