Jquery 全選、反選問題解析

　　最近工做中，須要使用Jquery實現複選框的全選和反選，本人雖然不是專職擼前端的，但這個小問題感受也沒什麼難度，下面直接上代碼：

        <div id="list">  
       <ul class="mui-table-view textOverflow" id="notesList" >                 
                <li><input type="checkbox" name="notices" value="1"> 籃球</li>
                <li><input type="checkbox" name="notices" value="1"> 足球</li>
                <li><input type="checkbox" name="notices" value="1"> 乒乓球</li>
                <li><input type="checkbox" name="notices" value="1"> 羽毛球</li>
                <li><input type="checkbox" name="notices" value="1"> 排球</li>     
            </ul>
    </div>
    <input type="button" id="all" value="全選/全不選">
    <input type="button" value="全選" class="btn" id="selectAll">  
    <input type="button" value="全不選" class="btn" id="unSelect"> 

　　Jquery的代碼是這樣實現的：

$("#all").click(function(){

　　if($('input[name="notices"]').prop('checked') == true){

　　　　$('input[name="notices"]').prop('checked',false);
　　}else{
　　　　　$('input[name="notices"]').prop('checked',true);
　　}

});   這邊根據樓下的建議，再也不使用each了。

 

　　邏輯上是沒什麼問題的，可是結果卻出乎意料，全選以後，再次點擊，頁面直接沒反應了，首先檢查了一遍代碼，發現沒有什麼語法的問題，繼續尋找問題，我用的是chrome 瀏覽器，進度debug模式，發現js腳本也沒報錯，我剛開始覺得是瀏覽器的兼容性問題，使用IE10,火狐調試依然有這個問題，非常苦惱，就在網上尋找答案，有人提示說 attr和prop在jquery中的用法可能不太同樣，因而就去尋找jquery API，

果真找到了 可用的信息，如下是官網文檔說明：

Attributes vs. Properties

attributes和properties之間的差別在特定狀況下是很重要。jQuery 1.6以前 ，.attr()方法在取某些 attribute 的值時，會返回 property 的值，這就致使告終果的不一致。從 jQuery 1.6 開始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 應使用.prop()方法進行取值或賦值。 在jQuery1.6以前，這些屬性使用.attr()方法取得，可是這並非元素的attr屬性。他們沒有相應的屬性（attributes），只有特性(property)。

例如，考慮一個DOM元素的HTML標記中定義的<input type="checkbox" checked="checked" /> ，並假設它是一個JavaScript變量命名的e

elem.checked	true (Boolean) 將隨着複選框狀態的改變而改變
$(elem).prop("checked")	true (Boolean) 將隨着複選框狀態的改變而改變
elem.getAttribute("checked")	"checked" (String) 複選框的初始狀態;不會改變
$(elem).attr("checked") (1.6)	"checked" (String) 複選框的初始狀態;不會改變
$(elem).attr("checked") (1.6.1+)	"checked" (String) 將隨着複選框狀態的改變而改變
$(elem).attr("checked") (pre-1.6)	true (Boolean) 將隨着複選框狀態的改變而改變

根據W3C的表單規範 ，在checked屬性是一個布爾屬性， 這意味着,若是這個屬性（attribute）是目前存在， 即便，該屬性沒有對應的值，或者被設置爲空字符串值，或甚至是"false"，相應的屬性（property）爲true。 這纔是真正的全部布爾屬性（attributes）。

然而，要記住的最重要的概念是checked特性（attribute）不是對應它checked屬性（property）。特性（attribute）實際對應的是defaultChecked屬性（property），並且僅用於設置複選框最初的值。checked特性（attribute）值不會由於複選框的狀態而改變，而checked屬性（property）會由於複選框的狀態而改變。所以，  跨瀏覽器兼容的方法來肯定一個複選框是否被選中，是使用該屬性（property）：

• if ( elem.checked )
• if ( $(elem).prop("checked") )
• if ( $(elem).is(":checked") )

對於其餘的動態屬性，一樣是true，好比 selected 和 value.

以上API說的很清楚，checked是布爾屬性，而checked特性不是對應它checked屬性，它對應的是defaultChecked屬性，即它是不會隨着複選框的狀態而改變的。

此時我看了個人Jquyer 版本

<script type="text/javascript" src="jquery-1.11.1/jquery.min.js"></script>

1.11.1比1.6.1高了好幾個版本，我首先把上面的代碼的attr方法所有替換成prop方法，測試，經過，好使！

而後我又從網上下載一個比1.6.1版本低的jquery，用以上的代碼，也能夠實現 全選/反選。