JS中全选与取消全选

Z顺其自然

已于 2024-03-22 14:10:41 修改

阅读量7k

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

于 2018-05-06 22:41:52 首次发布

本文链接：https://blog.csdn.net/ShunqiziranZ/article/details/80219543

一.介绍

点击全选复选框，然后所有的复选框都选中，全选变成取消全选，点击取消全选复选框，然后所有的复选框都取消选中，今天我们用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" onclick="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>