前端js实现全选反选

最新推荐文章于 2023-11-07 11:26:54 发布

钱端攻城狮

最新推荐文章于 2023-11-07 11:26:54 发布

阅读量525

点赞数 1

分类专栏： js 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_54932975/article/details/123537203

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="all">全选</button>
		<button id="fan">反选</button>
		<input type="checkbox" id="i1"/>
		
		<ul>
			<li><input type="checkbox"/>洗jio</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" />spa</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	var allCheckBox = document.getElementsByTagName("ul")[0].getElementsByTagName("input");
	
	
	
	//全选
	all.onclick = function(){
		for(var i = 0; i < allCheckBox.length; i++){
			allCheckBox[i].checked = true;
		}
		i1.checked = true;
	}
	
	//反选
	fan.onclick = function(){
		var count = 0;//计数
		for(var i = 0; i < allCheckBox.length; i++){
			//方式1
			/*
			if(allCheckBox[i].checked == true){
				allCheckBox[i].checked = false;
			}else{
				allCheckBox[i].checked = true;
			}
			*/
			//方式2
			allCheckBox[i].checked = !allCheckBox[i].checked;
		  
		  //判断每个选项是否为true 并计数!
		if(allCheckBox[i].checked == true){
			count++;
		}
	}
		//一定要在循环结束后
		if(count == allCheckBox.length){
			i1.checked = true
		}else{
			i1.checked = false;
		}
		
	}
	
	//点击分选项
	for(var i = 0; i < allCheckBox.length; i++){
		allCheckBox[i].onclick = function(){
			var count = 0;//计数
			for(var j = 0; j < allCheckBox.length; j++){
				if(allCheckBox[j].checked == true){
					count++;
				}
				
			}
			//循环结束  遍历一遍
			if(allCheckBox.length == count){
				i1.checked = true;
			}else{
				i1.checked = false;
			}
			
			
		}
	}
</script>

运行结果:
在这里插入图片描述
点击全选:

点击部分:
在这里插入图片描述
点击反选:

钱端攻城狮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端js实现全选反选

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="all">全选</button> <button id="fan">反选</button> <input type="checkbox" id=
复制链接

扫一扫