tips:Jquery的attr和prop的區別
阿新 • • 發佈:2019-02-14
Jquery的attr和prop的區別
描述:想做一個複選框checkbox全選的功能,當勾選全選後,將子項的複選框狀態設定成一致的,
但遇到了一個問題,就是attr函式並不能改變子項的checkbox的狀態,而換成prop函式就可以了。
原因在於attr和prop的區別:我覺得有句話概括的非常好
---------對於HTML元素本身就帶有的固有屬性,在處理時,使用prop方法。
---------對於HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法。
就拿我的程式碼做例子:
jsp:
<th> <label class="am-checkbox"> <input type="checkbox" id="selectAll" data-am-ucheck> 全選 </label> </th>
<c:forEach items="${pb.beanList }" var="product">
<tr class="even gradeC">
<td>
<label class="am-checkbox"> <input type="checkbox" value="${product.productId }" name="checkboxBtn" data-am-ucheck> </label>
</td>
</tr>
</c:forEach>
js:
$(function() { /* * 給全選新增click事件 */ $("#selectAll").click(function() { /* * 1. 獲取全選的狀態 */ var bool = $("#selectAll").prop("checked"); /* * 2. 讓所有條目的複選框與全選的狀態同步 */ setItemCheckBox(bool); }); }); /* * 統一設定所有條目的複選按鈕 */ function setItemCheckBox(bool) { $(":checkbox[name=checkboxBtn]").prop("checked", bool); }
checkbox選中屬性對應“checked”,屬於固有屬性,因此需要使用prop方法去操作才能獲得正確的結果,如果用attr則會出現undefined這樣的錯誤。
所以說,要分清屬性的情況再選擇用prop還是attr。用錯的話就會出現undefined這樣的錯誤。