js实现复选框全选，全不选及反选

最新推荐文章于 2021-02-26 15:18:16 发布

聂小邯

最新推荐文章于 2021-02-26 15:18:16 发布

阅读量383

点赞数 1

分类专栏： js的使用

本文链接：https://blog.csdn.net/weixin_45069992/article/details/90647277

版权

js的使用专栏收录该内容

13 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		//html布局
		<input type="button" value="全选" id="all"/>
		<input type="button" value="全不选" id="not"/>
		<input type="button" value="反选" id="cle"/>
		<br />
		<br />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		
		<script>
			//获取按钮
			var all = document.getElementById("all");
			var not = document.getElementById("not");
			var cle = document.getElementById("cle");
			//获取所有复选框
			var inputs = document.getElementsByTagName("input");
			//全选
			all.onclick = function () {
				for (var i = 3; i < 12; i++) {
					inputs[i].checked = true;
				}
			};
			//全不选
			not.onclick = function () {
				for (var i = 3; i < 12; i++) {
					inputs[i].checked = false;
				}
			};
			//反选
			cle.onclick = function () {
				for (var i = 3; i < 12; i++) {
					if (inputs[i].checked === true) {
						inputs[i].checked = false;
					} else {
						inputs[i].checked = true;
					}
				}
			}
		</script>
	</body>
</html>