jquery判斷複選框選中狀態以及區分attr和prop

jquery判斷複選框選中狀態以及區分attr和prop_jquery

WBOY

發布： 2016-05-16 15:25:00

原創

1930 人瀏覽過

最近專案中需要用jquery判斷input裡checkbox是否被選中，發現用attr（）獲取不到複選框改變後的狀態，最後查資料發現jQuery 1.6以後新增加了prop（）方法，借用官方的一段描述就是：

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property Query 1.6, the .attr() method sometimes took property of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
上面翻譯過來大概就是：prop（）處理來自節點物件自帶的屬性，它包含了很多原生的property；而attr（）來自物件的attributes，可能是我們在元素節點上加入屬性節點才會有的。當然，前面的翻譯僅代表本人觀點，如有錯誤，可以提出來~~

簡單的來說就是：

對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自訂的DOM屬性，在處理時，使用attr方法。
上面的描述也許有點模糊，引用一些大神的部落格內容加上我的測試，舉幾個例子就知道了。

第一個例子：元素的固有屬性以及自訂屬性說明

http://www.baidu.com" target="_self" class="btn">百度
這個例子裡元素的DOM屬性有「href、target和class"，這些屬性就是元素本身就帶有的屬性，也是W3C標準裡就包含有這幾個屬性，或者說在IDE裡能夠智慧提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。

刪除
這個範例裡元素的DOM屬性有“href、id和action”，很明顯，前兩個是固有屬性，而後面一個“action”屬性是我們自己自訂上去的，元素本身是沒有這個屬性的。這種就是自訂的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設定屬性值時，都會傳回undefined值。

第二個例子：prop（）與attr（）在表單應用上的差異

先來看一段用attr（）方法碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").attr("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").attr("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

登入後複製

上面這段程式的檢驗結果是：

從動態圖可以看出來，用attr（）取得不到使用者選取的狀態，它只會傳回表單的初始值。

再來看一段用prop（）方法碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").prop("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").prop("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

登入後複製

上面這段程式的檢驗結果是：