首頁猿問請問大神，我這個全選/全不選...

請問大神，我這個全選/全不選 jq代碼哪里出了問題？

JQuery

佟舟 2017-03-02 17:05:52

<!DOCTYPE html><html><head>?<meta charset="UTF-8">?<title></title><script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script></head><body><form id="form2">????????????<p>喜歡的運動</p>????????????<input type="checkbox" name="items" value="足球" />足球????????????<input type="checkbox" name="items" value="籃球" />籃球????????????<input type="checkbox" name="items" value="羽毛球" />羽毛球????????????<input type="checkbox" name="items" value="乒乓球" />乒乓球????????????<br />????????????<input type="checkbox" id="allorno" value="全選/全不選" />全選/全不選????????????<input type="button" value="反選" />????????????<input type="submit" value="提交" /></form><script type="text/javascript">$(function(){????????$("#allorno").click(function(){????????????????????$("#form2 :checkbox[name=items]").attr("checked",$(this).attr("checked"))????????});})</script></body></html>————————————————————————只有第一次點擊全選的時候，有效果，再次點擊想要全不選的時候，就不起作用了。但是把$(this).attr("checked")換成原生寫法this.checked就好使了，這是怎么回事呢？

查看完整描述

1 回答

已采納

jacsong

TA貢獻5條經(jīng)驗獲得超2個贊

jQuery 1.6之前，.attr()方法在取某些 attribute 的值時，會返回 property 的值，這就導致了結(jié)果的不一致。從 jQuery 1.6 開始， .prop()方法方法返回 property 的值,而 .attr() 方法返回 attributes 的值。?

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

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

elem.checked true (Boolean) 將改變復(fù)選框的狀態(tài)?
$(elem).prop("checked") true (Boolean) 將改變復(fù)選框的狀態(tài)?
elem.getAttribute("checked") "checked" (String) 不會改變的復(fù)選框的初始狀態(tài);?
$(elem).attr("checked") (1.6) "checked" (String) 不會改變的復(fù)選框的初始狀態(tài);?
$(elem).attr("checked") (1.6.1+) "checked" (String) 將改變復(fù)選框的狀態(tài)?
$(elem).attr("checked") (pre-1.6) true (Boolean) 將改變復(fù)選框的狀態(tài)?
根據(jù)W3C的表單規(guī)范，在checked屬性是一個布爾屬性，這意味著只要該 attribute 存在，即使它沒有值，或是一個空字符串，該屬性對應(yīng)的 property 就是 true。

更改后的代碼如下：

? ? ? ? $(function () {

? ? ? ? ? ? $("#allorno").click(function () {

? ? ? ? ? ? ? ? $("input[name='items']").prop("checked", $(this).prop("checked"));

? ? ? ? ? ? });

? ? ? ? });

? ? </script>

1 反對回復(fù) 2017-03-02