全选、全不选、反选功能的实现

飞鱼同学

已于 2022-04-08 22:20:33 修改

阅读量4.6k

点赞数 2

分类专栏：前端页面文章标签： js javascript checkbox css html

于 2021-01-26 22:19:53 首次发布

本文链接：https://blog.csdn.net/qq_42487459/article/details/113199456

版权

前端页面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

全选、全不选、反选

实现的功能是：
选中下面全选框，全部的框都会选中，反之就会全不选中；
当点击反选按钮时，选择框中的选框状态置反，选中的变为没选中，没选中变为选中
直接上代码：
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选、全不选、反选</title>
	</head>
	<body>
		<form action="">
			<p><input type="checkbox"name=""id="" />熊大</p>
			<p><input type="checkbox"name=""id="" />翠花</p>
			<p><input type="checkbox"name=""id="" />光头强</p>
			<p><input type="checkbox"name=""id="" />喜洋洋</p>
		</form>
		<button onclick="checkall(0)">全选</button>
		<button onclick="checkall(1)">全不选</button>
		<button onclick="checkall(2)">反选</button>
		<!--<script type="text/javascript">
			//选中的三个表现形式，①用户选中；②标签中的checked属性③js中checked属性为ture
			let but = document.getElementsByTagName('button');
			let inp = document.getElementsByTagName('input');
			//1.全选
			but[0].onclick = function(){
				for (let i = 0; i < inp.length; i++) {
					inp[i].checked = true;
				}				
			}
			//2.全不选
			but[1].onclick = function(){
				for (let i = 0; i < inp.length; i++) {
					inp[i].checked = false;
				}				
			}
			//3.反选
			but[2].onclick = function(){
				for (let i = 0; i < inp.length; i++) {
					inp[i].checked = !inp[i].checked;
				}				
			}			
		</script>-->
		<!--方法二： 优化代码-->
		<script type="text/javascript">			
			let but = document.getElementsByTagName('button');
			let inp = document.getElementsByTagName('input');
			function checkall(num){
				for (let i = 0; i < inp.length; i++) {
					if (num == 0) {//全选
						inp[i].checked = true;
					}
					if (num == 1) {//全不选
						inp[i].checked = false;
					}
					if (num == 2) {//反选
						inp[i].checked = !inp[i].checked;
					}
				}	
			}
		</script>
	</body>
</html>