html实现选择框的全选与反选

最新推荐文章于 2024-04-07 12:59:07 发布

才疏学浅的小缘同学

最新推荐文章于 2024-04-07 12:59:07 发布

阅读量2.7k

点赞数 1

分类专栏： JavaScript学习文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_44790505/article/details/120225580

版权

JavaScript学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选和反选</title>
	</head>
	<script type="text/javascript">
		//页面加载
		window.onload = function(){
			var checkAll = document.getElementById("checkAll");
			var checkBack = document.getElementById("checkBack");
			
			var hobby = document.getElementsByClassName("check");
			
			//全选
			checkAll.onclick = function(){
				var ok = this.checked; //checked为布尔值
				for(var i in hobby){
					hobby[i].checked = ok;
				}
			};
			//反选
			checkBack.onclick = function(){					
				for(var i in hobby){
					hobby[i].checked = !hobby[i].checked;
				}
			};		
		};
	</script>
	<body>
		<caption>兴趣爱好</caption>
		<div id="dv">
			<input class="check" type="checkbox" value="玩游戏"/>玩游戏
			<input class="check" type="checkbox" value="听音乐"/>听音乐
			<input class="check" type="checkbox" value="做运动"/>做运动
			<input class="check" type="checkbox" value="搞学习"/>搞学习
			<input class="check" type="checkbox" value="吃东西"/>吃东西
		</div>	
		<div>
			<input id="checkAll" type="checkbox"/>全选
			<input id="checkBack" type="checkbox"/>反选
		</div>
	</body>
</html>

执行结果：

才疏学浅的小缘同学

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
html实现选择框的全选与反选

代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全选和反选</title> </head> <script type="text/javascript"> //页面加载 window.onload = function(){ var checkAll = document.getElementByI
复制链接

扫一扫