JavaScript 实现全选、全不选和反选功能

最新推荐文章于 2025-03-29 10:30:48 发布

Aaron莫言

最新推荐文章于 2025-03-29 10:30:48 发布

阅读量2k

点赞数 2

文章标签：前端 javascript html

原文链接：https://blog.youkuaiyun.com/m0_62617719/article/details/128308965

版权

该文章介绍了如何使用JavaScript实现网页中复选框的全选、全不选和反选功能。通过获取name属性相同的复选框元素集合，遍历并修改checked属性来达到操作目的。提供了具体的函数实现代码和HTML示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选、全不选和反选功能。

声明：文章转载链接出自：JavaScript 实现全选、全不选和反选功能_js全选和全不选代码_梁辰兴的博客-优快云博客

一，设计HTML页面

使用input标签的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。HTML实现代码如下：

界面展示

二，解决思路

需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true 。

1.全选函数

// 全选
function setAll() {
	var hb = document.getElementsByName("hb");
	for (var i = 0; i < hb.length; i++) {
		hb[i].checked = true;
	}
}

2.全不选函数

// 全不选
function unsetAll() {
	var hb = document.getElementsByName("hb");
	for (var i = 0; i < hb.length; i++) {
		hb[i].checked = false;
	}
}

3.反选函数

// 反选
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;
	}
}

三，综合代码

将上面的函数添加到按钮的点击事件中即可，最终附上源码，如下：

<!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" />爬山</li>
			<li><input type="checkbox" name="hb" />游泳</li>
			<li><input type="checkbox" name="hb" />攀岩</li>
			<li><input type="checkbox" name="hb" />冲浪</li>
			<li><input type="checkbox" name="hb" />说唱</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>

运行效果