最近工作中，需要使用Jquery實(shí)現(xiàn)復(fù)選框的全選和反選，本人雖然不是專職擼前端的，但這個(gè)小問題感覺也沒什么難度，下面直接上代碼：

<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的代碼是這樣實(shí)現(xiàn)的：

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

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

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

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

?

　　邏輯上是沒什么問題的，但是結(jié)果卻出乎意料，全選之后，再次點(diǎn)擊，頁面直接沒反應(yīng)了，首先檢查了一遍代碼，發(fā)現(xiàn)沒有什么語法的問題，繼續(xù)尋找問題，我用的是chrome 瀏覽器，進(jìn)度debug模式，發(fā)現(xiàn)js腳本也沒報(bào)錯(cuò)，我剛開始以為是瀏覽器的兼容性問題，使用IE10,火狐調(diào)試依然有這個(gè)問題，很是苦惱，就在網(wǎng)上尋找答案，有人提示說 attr和prop在jquery中的用法可能不太一樣，于是就去尋找jquery API，

果然找到了 可用的信息，以下是官網(wǎng)文檔說明：

Attributes vs. Properties

attributes和properties之間的差異在特定情況下是很重要。jQuery 1.6之前?，.attr()方法在取某些 attribute 的值時(shí)，會(huì)返回 property 的值，這就導(dǎo)致了結(jié)果的不一致。從 jQuery 1.6 開始，?.prop()方法 方法返回 property 的值,而?.attr()?方法返回 attributes 的值。

例如,?selectedIndex,?tagName,?nodeName,?nodeType,?ownerDocument,?defaultChecked, 和?defaultSelected?應(yīng)使用.prop()方法進(jìn)行取值或賦值。?在jQuery1.6之前，這些屬性使用.attr()方法取得，但是這并不是元素的attr屬性。他們沒有相應(yīng)的屬性（attributes），只有特性(property)。

例如，考慮一個(gè)DOM元素的HTML標(biāo)記中定義的<input type="checkbox" checked="checked" />?，并假設(shè)它是一個(gè)JavaScript變量命名的e

elem.checked$(elem).prop("checked")elem.getAttribute("checked")$(elem).attr("checked")?(1.6)$(elem).attr("checked")?(1.6.1+)$(elem).attr("checked")?(pre-1.6)

true?(Boolean) 將隨著復(fù)選框狀態(tài)的改變而改變

true?(Boolean) 將隨著復(fù)選框狀態(tài)的改變而改變

"checked"?(String) 復(fù)選框的初始狀態(tài);不會(huì)改變

"checked"?(String) 復(fù)選框的初始狀態(tài);不會(huì)改變

"checked"?(String) 將隨著復(fù)選框狀態(tài)的改變而改變

true?(Boolean) 將隨著復(fù)選框狀態(tài)的改變而改變

根據(jù)W3C的表單規(guī)范?，在checked屬性是一個(gè)布爾屬性， 這意味著,如果這個(gè)屬性（attribute）是目前存在， 即使，該屬性沒有對(duì)應(yīng)的值，或者被設(shè)置為空字符串值，或甚至是"false"，相應(yīng)的屬性（property）為true。 這才是真正的所有布爾屬性（attributes）。

然而，要記住的最重要的概念是checked特性（attribute）不是對(duì)應(yīng)它c(diǎn)hecked屬性（property）。特性（attribute）實(shí)際對(duì)應(yīng)的是defaultChecked屬性（property），而且僅用于設(shè)置復(fù)選框最初的值。checked特性（attribute）值不會(huì)因?yàn)閺?fù)選框的狀態(tài)而改變，而checked屬性（property）會(huì)因?yàn)閺?fù)選框的狀態(tài)而改變。因此， ?跨瀏覽器兼容的方法來確定一個(gè)復(fù)選框是否被選中，是使用該屬性（property）：

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

對(duì)于其他的動(dòng)態(tài)屬性，同樣是true，比如?selected?和?value.

以上API說的很清楚，checked是布爾屬性，而checked特性不是對(duì)應(yīng)它c(diǎn)hecked屬性，它對(duì)應(yīng)的是defaultChecked屬性，即它是不會(huì)隨著復(fù)選框的狀態(tài)而改變的。

此時(shí)我看了我的Jquyer 版本

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

1.11.1比1.6.1高了好幾個(gè)版本，我首先把上面的代碼的attr方法全部替換成prop方法，測試，通過，好使！

然后我又從網(wǎng)上下載一個(gè)比1.6.1版本低的jquery，用以上的代碼，也可以實(shí)現(xiàn) 全選/反選。

?

轉(zhuǎn)載于:https://www.cnblogs.com/gzd-123/p/5662893.html

總結(jié)

以上是生活随笔為你收集整理的Jquery 全选、反选问题解析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。