checkbox 全选和反选

时间 2019-11-21

标签 checkbox 全选栏目 HTML 繁體版

原文原文链接

代码以下：javascript

<!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就没问题了。html

附attr和prop的区别：java

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