1. 程式人生 > >tips:Jquery的attr和prop的區別

tips:Jquery的attr和prop的區別

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這樣的錯誤。