tips：Jquery的attr和prop的区别

Jquery的attr和prop的区别

描述：想做一个复选框checkbox全选的功能，当勾选全选后，将子项的复选框状态设置成一致的，

但遇到了一个问题，就是attr函数并不能改变子项的checkbox的状态，而换成prop函数就可以了。

原因在于attr和prop的区别：我觉得有句话概括的非常好

---------对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

---------对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

----------------来自〖芈老头〗的技术空间-All For Better Codes

就拿我的代码做例子：

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这样的错误。