方案一：

<script>
$(function () { 
$("#all").click(function(){    
    if(this.checked){    
        $("#list :checkbox").attr("checked", true);   
    }else{    
        $("#list :checkbox").attr("checked", false); 
    }    
});
});
</script>

方案二：

<script>
$(function () { 
$("#all"
 
).click(function(){    
    if(this.checked){    
        $("#list :checkbox").prop("checked", true);   
    }else{    
        $("#list :checkbox").prop("checked", false); 
    }    
});
});
</script>

今天在設定checkbox全選功能時，使用方案一在測試時發現全選功能在頁面不重新整理的情況下只能執行一次， 檢視官方文件， 才知道從 jQuery 1.6 開始新增了一個方法 prop()，但是一直都沒有使用過。

從中文意思看，兩者分別是獲取/設定 attributes 和 properties 的方法，那麼為什麼還要增加 prop() 方法呢？

Before jQuery 1.6, the .attr() method sometimes took property values
into account when retrieving some attributes, which could cause
inconsistent behavior.

因為在 jQuery 1.6 之前，使用 attr() 有時候會出現不一致的行為。

那麼，什麼時候使用attr()，什麼時候使用prop()？

To retrieve and change DOM properties such as the checked, selected,
or disabled state of form elements, use the .prop() method.

根據官方的建議：具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

到此，將 attr(‘checked’) 改成 prop(‘checked’) 即可修復提的 issues 了。

轉載請註明出處。歡迎關注本公眾號,檢視更多幹貨！