制作复选框的全选/全不选效果

最新推荐文章于 2021-11-23 09:42:12 发布

笑笑师弟

最新推荐文章于 2021-11-23 09:42:12 发布

阅读量742

点赞数 1

CC 4.0 BY-SA版权

文章标签： HTML 全选

本文链接：https://blog.youkuaiyun.com/qian_qian_123/article/details/83277365

前端实例专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现全选功能的方法。通过一个复选框控制多个复选框的状态，当全选复选框被勾选时，所有兴趣选项的复选框也会被勾选，反之亦然。此功能常见于网页表单中，用于方便用户选择多个选项。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选功能测试</title>
		<script type="text/javascript">
			function a() {
				var all = document.getElementById("all").checked;
				var others = document.getElementsByTagName("input");
				for(var i = 0; i < others.length; i++) {
					others[i].checked = all;
				}
			}
		</script>
	</head>

	<body>
		<input type="checkbox" value="运动" name="interests" />运动
		<input type="checkbox" value="游泳" name="interests" />游泳
		<input type="checkbox" value="打球" name="interests" />打球
		<input type="checkbox" value="爬山" name="interests" />爬山
		<input type="checkbox" value="跑步" name="interests" />跑步
		<br />
		<input type="checkbox" value="全选" name="interests" onclick="a()" id="all"/>全选
	</body>

</html>