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

2019-11-20 10:59:41

字體：大中小

來源：轉載

供稿：網友

最近項目中需要用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 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（）處理來自節點對象自帶的屬性，它包含了很多原生的property；而attr（）來自對象的attributes，可能是我們在元素節點上添加屬性節點才會有的。當然，前面的翻譯僅代表本人觀點，如有錯誤，可以提出來~~

簡單的來說就是：

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

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

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

<a href="#" id="link1" action="delete">刪除</a>
這個例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個是固有屬性，而后面一個“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個屬性的。這種就是自定義的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>

上面這段程序的測試結果是：