JS全选&取消全选

最新推荐文章于 2025-05-20 16:08:55 发布

不负勇往丶

最新推荐文章于 2025-05-20 16:08:55 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

文章标签： js全选&amp;取消全选

本文链接：https://blog.youkuaiyun.com/weixin_43555129/article/details/102700521

本文介绍如何使用HTML和JavaScript实现全选与取消全选的功能，通过点击一个复选框控制多个复选框的选中状态，适用于表单操作等场景。

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

点击全选复选框，然后所有的复选框都选中，全选变成取消全选，点击取消全选复选框，然后所有的复选框都取消选中，今天我们用HTML中的JS代码实现
下面是代码：

<!DOCTYPE html>`在这里插入代码片`
<html>
<head>
	<title>全选</title>
	<script type="text/javascript">
		function my(){
			var is=document.getElementById('box');//获取全选的复选框
			var em=is.checked;//判断复选框的选中状态  
			var iss=document.getElementsByName('box1');//下面所有的复选框
			var ass=document.getElementById('as');
			if(em){//如果全选复选框是false 则执行下面代码
				for(var i=0;i<iss.length;i++){ //循环下面所有复选框,将所有复选框都选中
					iss[i].checked=true;  
				}
				ass.innerHTML='取消全选';//选中后将SPAN中的内容改为取消全选
			}else{
				for(var i=0;i<iss.length;i++){
					iss[i].checked=false;
				}
				ass.innerHTML='全选';
			}
		}
	</script>
</head>
<body>
	<input type="checkbox" id="box" οnclick="my()"><span id="as">全选</span>
	<input type="checkbox" name="box1">学生
	<input type="checkbox" name="box1">18
	<input type="checkbox" name="box1">男
	<input type="checkbox" name="box1">张三
</body>
</html>

结果是:

在这里插入图片描述