checkbox 全选和反选-CSDN博客

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
	</head>
	<body>
		<div>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()" >管理员</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()">管理员</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()" >管理员</input>
		<input type="checkbox" value="2"  name="resource"  onchange="checkOption()">管理员</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()">管理员</input>
		<input type="checkbox" value="2"  name="resource" onchange="checkOption()" >管理员</input>
		</div>
		<input type="checkbox" id="selectOption" name="dd" onchange="allselected()"/>全选/全不选
		
	</body>
	<script type="application/javascript">
	 function allselected(){
				
				$("input[name='resource']:checkbox").each(function(){ 
					   this.checked=$("input[id='selectOption']:checkbox").is(':checked');
					  
				});
				
			}
	 
	 function checkOption(){
	 	 alert( $('INPUT[name=resource]:checked').length==$('INPUT[name=resource]').length);
	 	 //attr不靠谱，有问题
	 	 $('#selectOption').prop('checked',$('INPUT[name=resource]:checked').length == $('INPUT[name=resource]').length);
	 	 
	 	
	 }
	</script>
</html>

其中坑点在attr有时候取值会出错，只能执行一次。适用prop就没问题了。

附attr和prop的区别：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具体可以看这个帖子：http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

转载于:https://my.oschina.net/mifans/blog/729693