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，用以上的代碼，也可以實現 全選/反選。

?