快捷導(dǎo)航

jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop

更新時(shí)間：2015年12月18日 09:03:54 作者：Sunshine_lily

這篇文章主要介紹了jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下

最近項(xiàng)目中需要用jquery判斷input里checkbox是否被選中，發(fā)現(xiàn)用attr（）獲取不到復(fù)選框改變后的狀態(tài)，最后查資料發(fā)現(xiàn)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 values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
上面翻譯過來大概就是：prop（）處理來自節(jié)點(diǎn)對象自帶的屬性，它包含了很多原生的property；而attr（）來自對象的attributes，可能是我們在元素節(jié)點(diǎn)上添加屬性節(jié)點(diǎn)才會有的。當(dāng)然，前面的翻譯僅代表本人觀點(diǎn)，如有錯(cuò)誤，可以提出來~~

簡單的來說就是：

對于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
上面的描述也許有點(diǎn)模糊，引用一些大神的博客內(nèi)容加上我的測試，舉幾個(gè)例子就知道了。

第一個(gè)例子：元素的固有屬性以及自定義屬性說明

<a href=" 這個(gè)例子里<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是W3C標(biāo)準(zhǔn)里就包含有這幾個(gè)屬性，或者說在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時(shí)，建議使用prop方法。

<a href="#" id="link1" action="delete">刪除</a>
這個(gè)例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個(gè)是固有屬性，而后面一個(gè)“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個(gè)屬性的。這種就是自定義的DOM屬性。處理這些屬性時(shí)，建議使用attr方法。使用prop方法取值和設(shè)置屬性值時(shí)，都會返回undefined值。

第二個(gè)例子：prop（）與attr（）在表單應(yīng)用上的區(qū)別

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr（）判斷是否選中</h3>
  <input type="checkbox" id="input01" />我是第一個(gè)復(fù)選框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二個(gè)復(fù)選框B<br />
  <input type="button" id="button01" value="獲取A的checked狀態(tài)" />
  <input type="button" id="button02" value="獲取B的checked狀態(tài)" />
  <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>

上面這段程序的測試結(jié)果是：

從動態(tài)圖可以看出來，用attr（）獲取不到用戶選中的狀態(tài)，它只返回表單的初始值。

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop（）判斷是否選中</h3>
  <input type="checkbox" id="input01" />我是第一個(gè)復(fù)選框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二個(gè)復(fù)選框B<br />
  <input type="button" id="button01" value="獲取A的checked狀態(tài)" />
  <input type="button" id="button02" value="獲取B的checked狀態(tài)" />
  <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>

上面這段程序的測試結(jié)果是：