JavaScript 实现全选、全不选和反选功能（最简单）

Red丶哞

已于 2023-09-18 20:28:51 修改

阅读量276

点赞数

分类专栏：前端文章标签：前端

于 2023-08-31 21:11:30 首次发布

本文链接：https://blog.csdn.net/weixin_48227918/article/details/132611687

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul style="list-style: none;">
			<span>楼层</span>
			<li><input type="checkbox" name="hb" />一号楼1楼</li>
			<li><input type="checkbox" name="hb" />一号楼2楼</li>
			<li><input type="checkbox" name="hb" />一号楼3楼</li>
			<li><input type="checkbox" name="hb" />一号楼4楼</li>
			<li><input type="checkbox" name="hb" />一号楼5楼</li>
		</ul>
		<input type="button" onclick="setAll()" value="全选" id="qx" />
		<input type="button" onclick="unsetAll()" value="全不选" id="qbx" />
		<input type="button" onclick="setOthers()" value="反选" id="fx" />
	</body>
	<script>
		// 全选
		function setAll() {
			var hb = document.getElementsByName("hb");
			for (var i = 0; i < hb.length; i++) {
				hb[i].checked = true;
			}
		}
		// 全不选
		function unsetAll() {
			var hb = document.getElementsByName("hb");
			for (var i = 0; i < hb.length; i++) {
				hb[i].checked = false;
			}
		}
		// 反选
		function setOthers() {
			var hb = document.getElementsByName("hb");
			for (var i = 0; i < hb.length; i++) {
				if (hb[i].checked == false)
					hb[i].checked = true;
				else
					hb[i].checked = false;
			}
		}
	</script>
</html>