<form> 你愛好的運動是?<input type="checkbox" id="CheckedAll" />全選/全不選<br /> <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="button" id="send" value="提 交" /> </form>
$("#CheckedAll").click(function () { if ($(this).is(":checked")) { $("[name=items]:checkbox").attr("checked", true); } else { $("[name=items]:checkbox").attr("checked", false); } });
第一次執行,沒問題,但第二次執行就有問題了,選擇不了
解決辦法:把attr()換成prop()
$("#CheckedAll").click(function () { if ($(this).is(":checked")) { $("[name=items]:checkbox").prop("checked", true); } else { $("[name=items]:checkbox").prop("checked", false); } });
PS:prop()和attr()區別:
(來源:http://hxq0506.iteye.com/blog/1046334)
最近在iteye的新聞中看到jQuery已經更新到了1.6.1。和之前版本的最大變化是增加了.prop方法。但是.prop()方法和.attr()方法,單從字面上很難區分。在漢語中properties和attributes都有表示“屬性”的意思。
下面根據這篇博文(javascript:mctmp(0);),簡要翻譯了.prop()和.attr()的用法:
1、從1.5.2升級到1.6.1
通過介紹新方法.prop()以及.attr()方法的改變,jQuery1.6.1引起了一場關於attributes和properties之間有何區別和聯系的激烈討論。同時,1.6.1也解決了一些向后兼容性問題。當從1.5.2升級到1.6.1時,你不必修改任何attribute代碼。
下面是關於jQuery1.6和1.6.1中Attributes模塊變化的描述,以及.attr()方法和.prop()方法的首選使用。然而,正如前面所述,jQuery1.6.1允許你使用.attr()方法就像以前它被使用在所有的情況中一樣。
2、發生了什么變化
Attributes模塊的變化是移除了attributes和properties之間模棱兩可的東西,但是在jQuery社區中引起了一些混亂,因為在1.6之前的所有版本中都使用一個方法(.attr())來處理attributes和properties。但是老的.attr()方法有一些bug,很難維護。jQuery1.6.1對Attributes模塊進行了更新,並且修復了幾個bug。
特別提到的是,boolean attributes,比如:checked,selected,readonly和disabled在1.6.1中和1.6之前的處理相同。這意味着下面的代碼:
- $(“:checkbox”).attr(“checked”, true);
- $(“option”).attr(“selected”, true);
- $(“input”).attr(“readonly”, true);
- $(“input”).attr(“disabled”, true);
甚至是這樣的代碼:
- if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }
在1.6.1中沒有必要為了保持之前期望的運行結果而發生任何改變。
3、首選用法的概述
.prop()方法應該被用來處理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且應該繼續使用.attr()方法來進行操作。
上面的概述已經描述的夠清楚了,我也沒有必要再總結了。