js 全选/全不选/反选

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

Zella Zhang

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

阅读量151

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/FemaleHacker/article/details/112784401

版权

javascript 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

废话不多说，直接上代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>js</title>
	<style>
		
	</style>
 	<script type="text/javascript">
 		window.onload = function(){
 			// 获取四个多选框
			var items = document.getElementsByName('items');

 			// 全选
 			var checkedAllBtn = document.getElementById('checkedAllBtn');
 			var checkedAllBox = document.getElementById('checkedAllBox');
 			checkedAllBtn.onclick = function(){
 				// 遍历设置四个多选框为选中状态
 				for(var i=0;i<items.length;i++){
 					items[i].checked = true;
 				}
 				checkedAllBox.checked=true;

 			};

 			// 全不选
 			var checkedNoBtn = document.getElementById('checkedNoBtn');
 			checkedNoBtn.onclick = function(){
 				// 遍历设置四个多选框为不选中状态
 				for(var i=0;i<items.length;i++){
 					items[i].checked = false;
 				}
 				checkedAllBox.checked=false;

 			};

 			// 反选
 			var checkedRevBtn = document.getElementById('checkedRevBtn');
 			checkedRevBtn.onclick = function(){
 				// 遍历设置反选状态
 				for(var i=0;i<items.length;i++){
 					items[i].checked = !(items[i].checked);
 					checkedAllBox.checked=true;
 					if(!items[i].checked){
 						checkedAllBox.checked=false;
 					}
 				}
 			};

 			// 提交
 			var sendBtn = document.getElementById('sendBtn');
 			var result = document.getElementById('result');
 			var tempArr = [];
 			sendBtn.onclick = function(){
 				for(var i=0;i<items.length;i++){
 					if(items[i].checked){
 						tempArr.push(items[i].value);
 					}
 				}
 				result.innerHTML = '你爱好的运动是：'+ tempArr;
 			};

 			// checkedAllBox 全选/全不选
 			// 当其选中时，其余全选中；当期取消时，其余也取消
 			checkedAllBox.onclick = function(){
				for(var i=0;i<items.length;i++){
					items[i].checked = this.checked;
				}
 			};

 			// 补充
 			/*
			* 如果四个多选框全选中，则checkedAllBox也应被选中
			* 如果全不选中，则checkedAllBox也应不选中
 			*/
 			for(var i=0;i<items.length;i++){
 				items[i].onclick = function(){
 					checkedAllBox.checked=true;
 					for(var j=0;j<items.length;j++){
 						// 判断四个多选框是否为全选
 						if(!items[j].checked){
 							checkedAllBox.checked=false;
 							break;
 						}
 					}
 				};
 			}
 		};	
	</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="乒乓球">乒乓球
		<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>
	<p id="result"></p>
</body>
</html>

中间还是有小细节需要大家注意的

Zella Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 全选/全不选/反选

效果图废话不多说，直接上代码<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>js</title> <style> </style> <script type="text/javascript"> window.onload = function(){ // 获取
复制链接

扫一扫

专栏目录