jQuery实现全选框要注意的地方_jquery如何全选框-优快云博客

在阅读《锋利的jQuery》时，发现书中关于复选框全选功能的代码存在bug。问题在于全选按钮在页面刷新后仅第一次点击有效。经研究发现，jQuery 1.6引入的prop()方法用于处理属性值，而attr()方法用于设置或返回属性值。prop()适用于处理布尔属性，如checked。因此，修复bug的方法是将attr()替换为prop()。

最近在看《锋利的jQuery》，对前端感兴趣的同学可以看一看这本书，PDF版很容易找，也可以留言让我发给你们。

今天看到第五章对表单、表格的操作以及更多应用，发现其中复选框应用该小节的例子有bug。在运行该例子的时候，我多点了几下，发现全选按钮只有在每次刷新后第一次点击生效，在刷新前再点都不起作用。话不多说，上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框应用</title>
	</head>
	<body>
		<form action="#" method="post">
			您爱好的运动是<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="蓝球" />蓝球
			<input type="checkbox" name="items" value="排球" />排球
			<input type="checkbox" name="items" value="兵乓球" />兵乓球<br />
			<input type="button" id="checkall" value="全选" />
			<input type="button" id="checkNo" value="全不选" />
			<input type="button" id="checkRev" value="反选" />
			<input type="submit" value="提交"/>
		</form>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$("#checkall").click(function () {
			$("input[type='checkbox']").attr("checked",true)//全选,只能用一次
		})
		$("#checkNo").click(function () {
			$("input[type='checkbox']").attr("checked",false)//全不选
		})
		$("#checkRev").click(function () {
			$("input[type='checkbox']").each(function () {
				$(this).attr("checked",!$(this).attr("checked"))//反选
			})
		})
		$("input[type='submit']").click(function () {
			var str = "您选中的是:\r\n"
			$("input[type='checkbox']:checked").each(function () {//获取每一个被选中的元素
				str += $(this).val()+"\r\n";
			});
			alert(str)
		})
	</script>
</html>

该代码运行后出现如下内容：

复选框

但是全选有bug。动手查阅相关资料，得出的结果如下：由于版本的迭代，1.6中增加了一个新方法prop（），该方法用于获取在匹配的元素集中的第一个元素的属性值。而常用的attr（）方法是用于设置或返回被选元素的属性值。两者的区别请运行以下来自菜鸟教程的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#p1").html("attr('checked'): " + $("input").attr('checked')
					  + "<br>prop('checked'): " + $("input").prop('checked'));
	});
});
</script>
</head>
<body>

<p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>

</body>
</html>

prop（）和attr（）的区别：

1.添加属性名称该属性就会生效应该使用prop（）

2.有true和false两个属性使用prop（）

3.其它则使用attr（）

所以要修改全选的bug只要把attr（）方法换成prop（）方法即可。具体代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框应用</title>
	</head>
	<body>
		<form action="#" method="post">
			您爱好的运动是<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="蓝球" />蓝球
			<input type="checkbox" name="items" value="排球" />排球
			<input type="checkbox" name="items" value="兵乓球" />兵乓球<br />
			<input type="button" id="checkall" value="全选" />
			<input type="button" id="checkNo" value="全不选" />
			<input type="button" id="checkRev" value="反选" />
			<input type="submit" value="提交"/>
		</form>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$("#checkall").click(function () {
			$("input[type='checkbox']").prop("checked",true)
		})
		$("#checkNo").click(function () {
			$("input[type='checkbox']").attr("checked",false)//全不选
		})
		$("#checkRev").click(function () {//反选
			$("input[type='checkbox']").each(function () {
				this.checked=!this.checked;
			})
		})
		$("input[type='submit']").click(function () {
			var str = "您选中的是:\r\n"
			$("input[type='checkbox']:checked").each(function () {//获取每一个被选中的元素
				str += $(this).val()+"\r\n";
			});
			alert(str)
		})
	</script>
</html>