checkbox全选衍生问题讨论

今天项目中遇到一个很简单的需求，全选、取消全选的功能，pa pa pa，代码如下：

<script type=”text/javascript” src=”http://static.joekoe.cn/images/script/jquery.min.js”></script></code>

<label><input id=”checkall” type=”checkbox” />全选</label>
<input type=”checkbox” name=”checkbox” />项1
<input type=”checkbox” name=”checkbox” />项2
<input type=”checkbox” name=”checkbox” />项3
<input type=”checkbox” name=”checkbox” />项4
<script type=”text/javascript”>// <![CDATA[

$(function(){
var $checkbox=$('input[name="checkbox"]‘);
$(“#checkall”).click(function(){
$checkbox.attr(“checked”,this.checked);
});
$checkbox.click(function(){
$(“#checkall”).attr(“checked”,$checkbox.length == $(“input[name='checkbox']:checked”).length ? true : false);
});

})

Jquery为最新版本,以上效果在第三次点击全选checkbox时，全选效果消失了，刷新页面后正常，引用老版本jquery（1.4）一切正常，基本可以判断是兼容性问题了，拜问度娘后得知以下知识点，与广大网友共同学习：
布尔型的属性，jquery1.6以后都是用.prop()方法就好了。
这个布尔型的属性，解释一下，是属性值只有true|false的属性。
还有种情况就是只添加属性名，不需要写属性值的就可以生效的也同样使用.prop()方法。比如：checked、disable这样的，其实它们说到底还是属于布尔型的属性。
找到问题点解决问题就简单了，代码拍上：

<script type=”text/javascript”>
$(function(){
var $checkbox=$(‘input[name="checkbox"]‘);
$(“#checkall”).click(function(){
$checkbox.prop(“checked”,this.checked);
});
$checkbox.click(function(){
$(“#checkall”).prop(“checked”,$checkbox.length == $(“input[name='checkbox']:checked”).length ? true : false);
});

})
</script>

转载于:https://www.cnblogs.com/sucuri/p/4073197.html