复选框的实现Dom对象

最新推荐文章于 2022-09-23 14:08:13 发布

麦田里的守望

最新推荐文章于 2022-09-23 14:08:13 发布

阅读量196

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_40281230/article/details/79502838

版权

4 篇文章 0 订阅

订阅专栏

实现其功能的代码如下表示：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script>

	window.onload = function(){
	selAll = document.getElementById("selAll");
	hobbys = document.getElementsByName("hobby");
	fx = document.getElementById("fx");

	//全选事件
	selAll.onclick = function(){
	//全选
	if(selAll.checked == true){
	for (var i=0;i<hobbys.length;i++) {
	hobbys[i].checked = true;
	}
	}else{
	for (var i=0;i<hobbys.length;i++) {
	hobbys[i].checked = false;
	}
	}
	}


	//反选
	fx.onclick = function(){

	for (var i=0;i<hobbys.length;i++) {
	var b = hobbys[i];
	if(b.checked == true){
	b.checked = false;
	}else{
	b.checked = true;
	}
	}
	}

	}



	</script>
	</head>
	<body>
	<input type="checkbox" name="" id="selAll" />全选
	<button id="fx">反选</button>
	<br>
	<input type="checkbox" name="hobby" />篮球
	<input type="checkbox" name="hobby" />足球
	<input type="checkbox" name="hobby" />乒乓球
	<input type="checkbox" name="hobby" />羽毛球
	</body>
	</html>

关注