t01 DOM 小练习全选练习

最新推荐文章于 2022-07-25 17:31:20 发布

weixin_43708170

最新推荐文章于 2022-07-25 17:31:20 发布

阅读量119

点赞数

分类专栏： dom练习文章标签： js dom

本文链接：https://blog.csdn.net/weixin_43708170/article/details/107405693

版权

dom练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

t01 DOM 小练习全选练习

结果图

在这里插入图片描述

功能介绍

点击全选按钮时，足球、篮球、跑步、跳绳四个多选框和全选/全不选会全部勾选上
点击全不选按钮时，足球、篮球、跑步、跳绳四个多选框和全选/全不选会全部不被勾选
点击反选按钮时，已经勾选了的取消勾选，未勾选的勾选上
全选/全不选勾选状态要和足球、篮球、跑步、跳绳四个多选框的全部勾选状态一致（即全选/全不选可以控制四个多选框是否全选；反过来，四个多选框是否全选也会控制全选/全不选的勾选状态）
点击提交按钮时，对话框弹出处于勾选状态的运动

代码

body中的布局

<body>
		<form action="" method="post">
			你爱好的体育运动是？<input type="checkbox" id="allBox"  />全选/全不选
			<br />
			<input type="checkbox" name="item" value="足球" />足球
			<input type="checkbox" name="item" value="篮球" />篮球
			<input type="checkbox" name="item" value="跑步" />跑步
			<input type="checkbox" name="item" value="跳绳" />跳绳
			<br />
			<input type="button" id="checkedAllBtn" value="全选" />
			<input type="button" id="checkedNotBtn" value="全不选" />
			<input type="button" id="checkedRBtn" value="反选" />
			<input type="button" id="sendBtn" value="提交" />
		</form>
	</body>

javaScript部分

<script type="text/javascript">
			window.onload = function(){
				
				//1.全选按钮
				var btn01 = document.getElementById("checkedAllBtn");
				var items = document.getElementsByName("item");
				btn01.onclick = function(){
					box.checked = true; //全选时，全选/全不选选择框要勾选上
					for(var i=0;i<items.length;i++){
						items[i].checked = true;
					}
				}
				
				//2全不选按钮
				var btn02 = document.getElementById("checkedNotBtn");
				var items = document.getElementsByName("item");
				btn02.onclick = function(){
					box.checked = false; 全选时，全选/全不选选择框要取消勾选
					for(var i=0;i<items.length;i++){
						items[i].checked = false;
					}
				}
				
				//3.反选按钮
				var btn03 = document.getElementById("checkedRBtn");
				var items = document.getElementsByName("item");
				/*
				 * 反选除了要实现反选功能，还要注意全选/全不选框状态
				 * 		当点击反选按钮后，四个框全被勾选，则全选/全不选框也要被勾选上
				 * 		当点击反选按钮后，四个框全部没有勾选，则全选/全不选框也要处于未勾选状态
				 */
				btn03.onclick = function(){
					box.checked = true;			
					for(var i=0;i<items.length;i++){
						items[i].checked = !items[i].checked;
						if(!items[i].checked){
							box.checked = false;
						}
					}
				}
				
				//4.提交按钮
				var btn04 = document.getElementById("sendBtn");
				var items = document.getElementsByName("item");
				btn04.onclick = function(){
					for(var i=0;i<items.length;i++){
						if(items[i].checked){
							alert(items[i].value);
						}	
					}
					
				}
				
				//5.全选/全不选
				var box = document.getElementById("allBox");
				var items = document.getElementsByName("item");
				box.onclick = function(){
					for(var i=0;i<items.length;i++){
						items[i].checked = box.checked;
					}
				}
				
				//6.全选/全不选与四个多选框关联起来
				var box = document.getElementById("allBox");
				var items = document.getElementsByName("item");
				//为每个多选框绑定单击响应函数
				for(var i=0;i<items.length;i++){
					items[i].onclick = function(){
						//先假设全被勾选，然后遍历，若出现了未被勾选的选择框，则说明未全被勾选 
						box.checked = true;
						for(var j=0;j<items.length;j++){
							if(!items[j].checked){
								box.checked = false;
								break;
							}
						}
					}					
				}
			}
		</script>

weixin_43708170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
t01 DOM 小练习全选练习

t01 DOM 小练习1 全选练习结果图功能介绍点击全选按钮时，足球、篮球、跑步、跳绳四个多选框和全选/全不选会全部勾选上点击全不选按钮时，足球、篮球、跑步、跳绳四个多选框和全选/全不选会全部不被勾选点击反选按钮时，已经勾选了的取消勾选，未勾选的勾选上全选/全不选勾选状态要和足球、篮球、跑步、跳绳四个多选框的全部勾选状态一致（即全选/全不选可以控制四个多选框是否全选；反过来，四个多选框是否全选也会控制全选/全不选的勾选状态）点击提交按钮时，对话框弹出处于勾选状态的运动
复制链接

扫一扫