表单全选和反选案例

最新推荐文章于 2024-11-20 20:01:18 发布

南逗

最新推荐文章于 2024-11-20 20:01:18 发布

阅读量464

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_46217523/article/details/105951617

版权

本文介绍了表单中全选和反选的功能实现。点击全选按钮，单选按钮将被选中；取消全选时，单选按钮清空；所有单选按钮被选中时，全选按钮自动勾选。主要涉及的技术点包括全选按钮与单选按钮的checked状态同步，以及通过监听单选按钮点击事件来判断全选按钮的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍
当点击全选按钮时，单选按钮也会有对勾；
当取消全选按钮的对勾时，单项按钮全部清空；
当单选安利全部被点击时，全选按钮会自动打钩；
案例分析
1.全选和取消全选做法：让下面的所有复选框的checked属性（选中状态）跟随全选按钮即可
2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看所有的小复选按钮是否有没选中的，如果有一个没选中，上面的全选按钮就不选中

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			table{
				margin: 0 auto ;
				width: 250px;
				height: 150px;
				text-align: center;
				border-collapse: collapse;
			}
			thead tr{	
				height: 30px;
				background-color:skyblue;
				color:white;
			}
			thead th{
				text-align: center;
				color:white;
				border: 1px solid darkgrey;
			}
			tbody tr{
				height: 30px;
			}
			tbody td{
				border: 1px solid darkgrey;
				font-size: 12px;
				text-align: center;
			}
			
		</style>
	</head>
<body>
	<div class="wrap">
	  <table>
		<thead>
		<tr>
			<th>
				<input type="checkbox" id="j_qx" />
			</th>
			<th>商品</th>
			<th>价格</th>
		</tr>
	  </thead>
	  <tbody id="j_tb">
		<tr>
			<td>
				<input type="checkbox" />
			</td>
			<td>食物</td>
			<td>100</td>			
		</tr>
		<tr>
			<td>
				<input type="checkbox" />
			</td>
			<td>手机</td>
			<td>200</td>			
		</tr>
		<tr>
			<td>
				<input type="checkbox" />
			</td>
			<td>电脑</td>
			<td>300</td>			
		</tr>
		<tr>
			<td>
				<input type="checkbox" />
			</td>
			<td>画笔</td>
			<td>400</td>			
		</tr>
	  </tbody>
	</table>
	</div>
	
	<script type="text/javascript">
	 //1.全选和取消全选做法：让下面的所有复选框的checked属性（选中状态）跟随 全选按钮即可
	 //获取元素
	 var j_qxAll=document.getElementById("j_qx"); //全选按钮
	 var j_tbAll=document.getElementById("j_tb").getElementsByTagName("input"); //单选按钮
	 // 注册事件
	 j_qxAll.onclick=function(){
	 		//this.checked 可以获取当前复选框的选中状态 若选中 则返回true 否则返回false
	 		console.log( this.checked);
	 		for (var i=0;i<j_tbAll.length;i++) {
	 			j_tbAll[i].checked=this.checked;
	 		}
	 	}
	 //2.下面复选框需要全部选中，上面全选才能选中 做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看所有的小复选按钮是否有没选中的，如果有一个没选中，上面的全选按钮就不选中
	 //  可以设置一个变量，来控制全选是否选中
	 for(var i=0;i<j_tbAll.length;i++){
	 	j_tbAll[i].onclick=function(){ 		
	 		//flag 控制全选按钮是否被选中
	 		var flag=true;  //默认点击按钮则返回true
	 		//每次点击下面的小按钮都要循环检查4个小按钮是否全部选中
	 		for (var i=0;i<j_tbAll.length;i++) {
	 			if (!j_tbAll[i].checked) {   //每次选中按钮会利用 j_tbAll[i].checked 返回一个true值 
	 			//j_qxAll.onclick=false; //某一个按钮要是没有被选中 则全选按钮改成false
	 				flag=false;
   break;

	 			} 
	 			j_qxAll.checked=flag;
	 		}
	 	}
	 	
	 }
	     
	</script>

<script src='js/jquery-3.3.1.min.js' type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>