首页 > 代码库 > checkbox全选衍生问题讨论

checkbox全选衍生问题讨论

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

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

<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>

checkbox全选衍生问题讨论