今天項目中遇到一個很簡單的需求，全選、取消全選的功能，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

總結

以上是生活随笔為你收集整理的checkbox全选衍生问题讨论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。