jQuery实现复选框——attr()和prop()的不同

今天在用query实现一个复选框功能的时候，用到attr()方法，主要功能就是实现一组复选框的全选，全不选和反选的效果。

首先是表单关键代码：

	

		喜欢的运动：

		游泳

		篮球

		足球

		跑步

		
		
		
		
	

然后依照书上（锋利的jQuery 第2版.pdf）的实例开始写jq代码：

	//复选框
	$("#checkAll").click(function() {
		$("[name=sports]:checkbox").attr("checked", true);
	});
	$("#checkNone").click(function() {
		$("[name=sports]:checkbox").attr("checked", false);
	});
	$("#checkRev").click(function() {
		$("[name=sports]:checkbox").each(function() {
			$(this).prop("checked", !$(this).prop("checked"));
		});
	});

完成上面2段代码之后发现全选和全不选功能基本OK，但是一旦点击反选，或者单独点击某一复选框之后问题就来了，再点“全选”或者“全不选”按钮，复选框按钮就不会再做相应改变了。反复查验几遍代码，都发现都不是代码的问题。

于是，自己问度娘去了。看到别人用jq实现复选框的时候用的不是attr()，而是prop()，而且效果正常。那么，attr()和prop()有什么不同？（参考：jQuery .attr() .prop() .data()区别及全选等问题和jquery中attr和prop的区别）

原来，在jq1.6之前的版本，并没有prop()方法，而是直接用attr()方法统一获取和设置HTML标签的属性。而attr()方法获取到的标签属性是默认值，不管后面修改为什么，获取到的都是原先的值，对于标签的固有属性，如“checked”和“selected”则用prop()方法。

例如：

是否可见
是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

知道了这个不同就知道全选和全不选的问题出现在哪里了。于是就把jq关键代码修改如下（把attr()替换为prop()）：

	//复选框
	$("#checkAll").click(function() {
		$("input[name=sports]").prop("checked", true);
	});
	$("#checkNone").click(function() {
		$("input[name=sports]").prop("checked", false);
	});
	$("#checkRev").click(function() {
		$("[name=sports]:checkbox").each(function() {
			$(this).prop("checked", !$(this).prop("checked"));
		});
	});

问题全部解决。

看到最后，发现书本作者也有提到这个问题，并做了总结（只是，为什么不把这个问题写在前面呢^_^）。遵循两个原则：