全选，反选，全不选

最新推荐文章于 2022-12-13 22:34:38 发布

天为我蓝

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gxywb/p/9429453.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				padding: 100px 150px;
			}
		</style>
		<script src="../1.10.2.jquery.min.js"></script>
	</head>
	<body>
		<input type="button" value="全选" id="quanxuan" />
		<input type="button" value="反选" id="fanxuan" />
		<input type="button" value="全不选" id="quanbuxuan" />
		<br />
		<br />
		<br />
		<ul id="articles">
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
			<li><input type="checkbox" />春夏秋冬</li>
		</ul>
		
	</body>
	<script>
		//全选
		$("#quanxuan").click(function(){
			$("#articles :checkbox").attr('checked','checked');
			$("#articles :checkbox").prop('checked',true);
		})
		//全不选
		$("#quanbuxuan").click(function(){
			$("#articles :checkbox").removeAttr('checked');
			$("#articles :checkbox").removeProp('checked');
		})
//		反选
		$("#fanxuan").click(function(){
//			获得现在处在选中状态的元素
			var obj=$("#articles :checked");
//			全选
			$("#articles :checkbox").attr('checked','checked');
			$("#articles :checkbox").prop('checked',true);
//			让刚才记录下来的元素取消选择
			obj.removeAttr('checked');
			obj.removeProp('checked');
		})
	</script>
</html>

转载于:https://www.cnblogs.com/gxywb/p/9429453.html