1. 程式人生 > >通過attr 動態設定CheckBox的checked屬性,會出現第二次設定cheked屬性不起作用的情況

通過attr 動態設定CheckBox的checked屬性,會出現第二次設定cheked屬性不起作用的情況

               

轉載自:http://blog.csdn.net/xiaouncle/article/details/52001117

出現該問題時就要了解一下jquery利用attr、prop方法的區別

在jquery中應該使用prop方法來獲取和設定checked屬性,不應該使用attr,需要的朋友可以參考下。

1、prop方法獲取、設定checked屬性

<input type="checkbox"
name="checkboxMain" onclick="CheckAll(this);" />function CheckAll(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屬性時,$(obj).prop(“checked”)的結果是false。 
設定$(“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

           

再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!希望你也加入到我們人工智慧的隊伍中來!http://www.captainbed.net

這裡寫圖片描述