jquery判斷複選框選中狀態以及區分attr和prop
這篇文章主要介紹了jquery判斷複選框選中狀態以及區分attr和prop，感興趣的小夥伴們可以參考一下
最近專案中需要用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="http://www.baidu.com
這個例子裡<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>上面這段程式的測試結果是：
從動態圖可以看出來，用prop（）可以實時獲取使用者的選中與取消操作狀態。
因此我總結的差別就是：property記錄的值會按照使用者操作實時更新，而attribute記錄的都是初始值，僅代表本人觀點。
希望本文所述對大家學習javascript程式設計有所幫助。
文章轉載自：https://m.jb51.net/article/76588.htm
作者：Sunshine_lily