JS必做——全选练习

Crazy ProMonkey

于 2021-09-27 22:00:45 发布

阅读量1.6k

点赞数

分类专栏：前端 python DOM 文章标签： javascript dom操作 html css

本文链接：https://blog.csdn.net/Fleehom/article/details/120518075

版权

python 同时被 3 个专栏收录

18 篇文章 4 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

DOM

4 篇文章 0 订阅

订阅专栏

练习要求：

制作一个选择页面，选项包括全选、全不选、单向勾选、多项勾选、反选、提交等多个按键功能，包含了JS的DOM操作事件中的大部分知识点以及强烈的逻辑思维能力的锻炼，，非常适合所有学习JS中DOM操作知识点的伙伴们去练习，可以这样说，把这个练习完成后，JS的DOM操作就掌握的差不多了！！！

项目功能：

1.#checkedAllBtn 全选按钮 - 点击按钮以后，四个多选框全都被选中

2.#checkedNoBtn 全不选按钮 - 点击按钮以后，四个多选框全都不被选中

3.#checkedRevBtn 反选按钮 - 点击按钮以后，四个多选框全都变成相反选中状态

4.#sendBtn 提交按钮 - 点击按钮以后，所点击的框的内容依次被弹出窗口显示

5.#checkedAllBox 全选/全不选按钮 - 点击按钮以后，四个多选框全都被选中或者全不被选中，且该按钮状态要和1中的全选按钮以及2中的全不选按钮的状态保持一致

6.#items 如果四个多选框全都被选中，则1中checkedAllBox按钮也应该被选中，如果四个多选框没都选中，则checkedAllBox也不应该选中（即只要有一个选框没有被选中，1中的按钮就不会被选中）

这6个功能中，前4个功能相对比较容易实现，后两个功能相对难一点，而且后两个功能也是建立在前4个功能都能实现的基础上才能进一步实现的，其具体设计编写思路需要伙伴们仔细认真反复思考后再去编写，因为有一点关系没有考虑到，功能就可能会出不来

代码演示：

接下来是小博主的代码演示分享（温馨提示：希望伙伴们先自己去练习后再拿来进行对比和改进，这样的话，伙伴们才能得到很大很快的质的进步）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选练习</title>
		<script type="text/javascript">
			window.onload = function(){
				var checkedAllBox = document.getElementById("checkedAllBox")
				
				// 1.#checkedAllBtn
				// 全选按钮  - 点击按钮以后，四个多选框全都被选中
				// 为id为checkedAllBtn的按钮绑定一个单击响应函数
				var checkedAllBtn = document.getElementById("checkedAllBtn") 
				checkedAllBtn.onclick = function(){
					var items = document.getElementsByName("items");
					for (var i=0; i<items.length; i++){
						items[i].checked = true;
					}
					checkedAllBox.checked = true;
				}
				// 2.#checkedNoBtn
				// 全不选按钮  - 点击按钮以后，四个多选框全都不被选中
				// 为id为checkedNoBtn的按钮绑定一个单击响应函数
				var checkedNoBtn = document.getElementById("checkedNoBtn")
				checkedNoBtn.onclick = function(){
					var items = document.getElementsByName("items");
					for (var i=0; i<items.length; i++){
						items[i].checked = false;
					}	
					checkedAllBox.checked = false;
				}
				// 3.#checkedRevBtn
				// 反选按钮  - 点击按钮以后，四个多选框全都变成相反选中状态
				// 为id为checkedRevBtn的按钮绑定一个单击响应函数
				var checkedRevBtn = document.getElementById("checkedRevBtn")
				checkedRevBtn.onclick = function(){
					var items = document.getElementsByName("items");
					for (var i=0; i<items.length; i++){
						items[i].checked = !items[i].checked;
					}	
					// 在反选时也需要判断四个多选框是否全都选中
					// 将checkedAllBox设置为选中状态
					checkedAllBox.checked = true;
					for (var j=0; j<items.length; j++){
						if (!items[j].checked){
							checkedAllBox.checked = false;
							break;
						}
					}
				}
				// 4.#sendBtn
				// 提交按钮  - 点击按钮以后，所点击的框的内容依次被弹出窗口显示
				// 为id为sendBtn的按钮绑定一个单击响应函数
				var sendBtn = document.getElementById("sendBtn")
				sendBtn.onclick = function(){
					var items = document.getElementsByName("items");
					for (var i=0; i<items.length; i++){
						if (items[i].checked){
							alert(items[i].value)
						}
					}	
				}
				// 5.#checkedAllBox
				// 全选/全不选按钮  - 点击按钮以后，四个多选框全都被选中后者全不被选中
				// 为id为checkedAllBox的按钮绑定一个单击响应函数
				var checkedAllBox = document.getElementById("checkedAllBox") 
				checkedAllBox.onclick = function(){
					var items = document.getElementsByName("items");
					for (var i=0; i<items.length; i++){
						items[i].checked = this.checked;
					}	
				}
				// 6.#items
				// 如果四个多选框全都被选中，则checkedAllBox也应该被选中
				// 如果四个多选框没都选中，则checkedAllBox也不应该选中
				// 为四个多选框分别绑定单击响应函数
				var items = document.getElementsByName("items");
				for (var i=0; i<items.length; i++){
					items[i].onclick = function(){
						checkedAllBox.checked = true;
						for (var j=0; j<items.length; j++){
							if (!items[j].checked){
								checkedAllBox.checked = false;
								break;
							}
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<form action="" method="post">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
			<br />
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全  选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反  选" />
			<input type="button" id="sendBtn" value="提  交" />
		</form>
	</body>
</html>

结果展示：

希望此次分享能给大家带来一些前端网页以及JS知识上的帮助（喜欢小编的关注、点赞走一波呦，后期会不定期分享更多Python、JS和前端相关知识）

Crazy ProMonkey

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS必做——全选练习

练习要求：制作一个选择页面，选项包括全选、全不选、单向勾选、多项勾选、反选、提交等多个按键功能，包含了JS的DOM操作事件中的大部分知识点以及强烈的逻辑思维能力的锻炼，，非常适合所有学习JS中DOM操作知识点的伙伴们去练习，可以这样说，把这个练习完成后，JS的DOM操作就掌握的差不多了！！！项目功能：1.#checkedAllBtn 全选按钮 - 点击按钮以后，四个多选框全都被选中2.#checkedNoBtn 全不选按钮 - 点击按钮以后，四个多选框全都不被选中3.#check...
复制链接

扫一扫