JavaScript学习练习程序DOM——爱好选择

最新推荐文章于 2024-08-03 17:54:09 发布

SCU阳光

最新推荐文章于 2024-08-03 17:54:09 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript HTML DOM

本文链接：https://blog.youkuaiyun.com/xzp_12345/article/details/77476930

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个JavaScript实现的爱好选择程序，介绍了如何利用HTML DOM进行页面元素的操作。通过展示代码，阐述了DOM的选择、修改和添加元素的方法，是JavaScript初学者了解DOM操作的好例子。

效果图：

相关代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>全选、反选</title>
	<script type="text/javascript">
		window.onload=function() {
			//全选/全不选
			document.getElementById("selectDeSelectAll").onclick=function() {
				var hobbys = document.getElementsByName("hobby");
				for(var i = 0; i < hobbys.length; i++) {
					hobbys[i].checked = this.checked;
				}
			}
			//按键：全选
			document.getElementById("bt1").onclick = function() {
				var hobbys = document.getElementsByName("hobby");
				for(var i = 0; i < hobbys.length; i++) {
					hobbys[i].checked = true;
				}
			}
			//按键：全不选
			document.getElementById("bt2").onclick = function() {
				var hobbys = document.getElementsByName("hobby");
				for(var i = 0; i < hobbys.length; i++) {
					hobbys[i].checked = false;
				}
			}

			//按键：反选
			document.getElementById("bt3").onclick = function() {
				var hobbys = document.getElementsByName("hobby");
				for(var i = 0; i < hobbys.length; i++) {
					hobbys[i].checked = !hobbys[i].checked;
				}
			}
		}
	</script>
</head>
<body>
<h2>请选择您的爱好：</h2>
	<input type="checkbox" id="selectDeSelectAll">全选/全不选<br/>
	<input type="checkbox" name="hobby" value="eat"/>吃饭 
	<input type="checkbox" name="hobby" value="sleep"/>睡觉 
	<input type="checkbox" name="hobby" value="game"/>打游戏 
	<input type="checkbox" name="hobby" value="study"/>学习 
	<br/><br/>
	<input type="button" id="bt1" value="全选"/>
	<input type="button" id="bt2" value="全不选"/>
	<input type="button" id="bt3" value="反选"/>
	<input type="button" id="bt4" value="提交"/>
</body>
</html>