通過attr 動態設定CheckBox的checked屬性,會出現第二次設定cheked屬性不起作用的情況
出現該問題時就要了解一下jquery利用attr、prop方法的區別
在jquery中應該使用prop方法來獲取和設定checked屬性,不應該使用attr,需要的朋友可以參考下。
1、prop方法獲取、設定checked屬性
<input type="checkbox" name="checkboxMain" onclick="CheckAll(this);" />functionCheckAll(obj){ //獲取checked屬性 if ($(obj).prop("checked")) { //設定checked屬性 $("input[name='checkboxall']" ).prop("checked", true); } else { //設定checked屬性 $("input[name='checkboxall']").prop("checked",false); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
當input控制元件checkbox設定了checked屬性時,無論checked=”“或
checked=”checked”,$(obj).prop(“checked”)的結果都是true;
當input控制元件checkbox沒設定checked屬性時,$
設定$(“input[name=’checkboxall’]”).prop(“checked”, true)時,checkbox會被選中;
設定$(“input[name=’checkboxall’]”).prop(“checked”, false)時,checkbox不會被選中;
2、attr方法獲取、設定checked屬性
<input type="checkbox" id="selectAll" onclick="checkAll()" >
全選
如果當前input中初始化未定義checked屬性,則不管當前是否選中,$(“#selectAll”).attr(“checked”)都會返回undefined; <input type="checkbox" id="selectAll" checked="" onclick="checkAll()" >
<input type="checkbox" id="selectAll" checked="checked"
onclick="checkAll()" >
全選 如果當前input中初始化定義了checked屬性,無論checked=”“或
checked=”checked”,當前checkbox都處於選中狀態,
$(“#selectAll”).attr(“checked”)都會返回”checked”;
3、總結
在jquery中應該使用prop方法來獲取和設定checked屬性,不應該使用attr。
這篇文章寫得較早,之後我又寫了一篇文章來解釋jQuery中prop和attr的區別,如果大家有需要的話請移步
http://blog.csdn.net/xiaouncle/article/details/53959496。
4、jquery版本原因
jquery-1.4.1.min.js、jquery-1.4.2.min.js可以用attr方法正確地獲取或設定checkbox的checked屬性,但是高版本例如:1.10.2.min.js就不能用attr方法正確地獲取或設定checkbox的checked屬性,在此宣告:其他版本沒有測試。
jquery-1.4.1.min.js檔案下載地址:http://download.csdn.net/detail/xiaouncle/9585180
jquery-1.4.2.min.js檔案下載地址:http://download.csdn.net/detail/xiaouncle/9585205