jQuery实践选择器之全选、全不选

最新推荐文章于 2024-08-12 12:57:58 发布

救救孩子把

最新推荐文章于 2024-08-12 12:57:58 发布

阅读量4.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/yuanmomoya/article/details/82192762

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现如图案例，实现全选、全不选、反选

用到 attr("checked" , true);//隐式迭代

用到attr("checked" , false);//隐式迭代

//反选按钮：选中变为未选中，未选中变为选中，看看这其中的具体实现，代码很精简

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选1(空白)</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
		*/
		$(function(){
			$("#checkedAllBtn").click(function(){
				//①全选按钮：点击后所有爱好都选中       设置的属性值相同
				$("input[name='items']").attr("checked" , true);//隐式迭代
			});
			$("#checkedNoBtn").click(function(){
				//②全不选按钮：点击后所有爱好都不选中
				$("input[name='items']").attr("checked" , false);//隐式迭代
			});
			$("#checkedRevBtn").click(function(){
				//反选按钮：选中变为未选中，未选中变为选中
				$("input[name='items']").each(function(){
					//alert(this.checked);//正在遍历的dom对象
					this.checked = !this.checked;
				});//设置不同的值 无法隐式迭代
			});
			$("#sendBtn").click(function(){
				//④提交按钮：点击后依次弹出选中内容
				//获取选中的复选框
				$("[name='items']:checked").each(function(){
					alert(this.value);
				});
			});
			
		});
		
	</script>
	</head>
	<body>
	
		<form method="post" action="">
		
			你爱好的运动是：
			<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="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		</form>
	
	</body>
</html>

实现如上图操作，不仅实现全选和全不选的操作，还要当复选框变化时，全选和全不选也发生变化

这其中最重要的是，当复选框变化时，全选和全不选也发生变化，怎么去实现

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选2(空白)</title>
	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
		*/
		$(function(){
			//①全选框：点击后让所有爱好的选中状态和自己一致
			$("#checkedAllBox").click(function(){
				//this代表被点击的复选框 dom对象
				//alert(this.checked);
				//设置 items的选中状态和 全选复选框一致
				$("input[name='items']").attr("checked" , this.checked);
			});
			//	②爱好框：点满后将全选框选中，否则取消选中
			$("input[name='items']").click(function(){
				//每个爱好框被点击 都需要判断当前爱好框是否被全部选中，如果选中修改全选框为选中
				//获取被选中爱好框的个数
				var checkedCount = $("input[name='items']:checked").length;
				//获取所有的爱好框的个数
				var totalCount = $("input[name='items']").length;
				
				/* if(checkedCount == totalCount){
					//全选
					$("#checkedAllBox").attr("checked" , true);
				}else{
					//没有全选
					$("#checkedAllBox").attr("checked" , false);
				} */
				$("#checkedAllBox").attr("checked" , checkedCount == totalCount);
			});
		});
		
	</script>
	</head>
	<body>
	
		<form method="post" action="">
		
			你爱好的运动是：<input type="checkbox" id="checkedAllBox" />全选/全不选 
			<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="乒乓球" />乒乓球
		</form>
	
	</body>
</html>