JavaScript练习之全选反选练习

最新推荐文章于 2022-05-16 15:19:06 发布

jsfantasy

最新推荐文章于 2022-05-16 15:19:06 发布

阅读量374

点赞数 2

分类专栏： JavaScript 文章标签： css html javascript JavaScript DOM Javascript事件

本文链接：https://blog.csdn.net/november_chopin/article/details/54986210

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!--
	作者：1377378268@qq.com
	时间：2017-02-11
	描述：单选框事件练习
		 点击全选按钮，所有复选框都被选上，点击全不选按钮，所有复选框都被取消
		 如图所示
-->

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选练习</title>
	</head>
	<script type="text/javascript">
		
		window.onload = function(){
			
			//获取所有的item列表
			var items = document.getElementsByName("items");
			//alert(items.length);
			
			var checkedAllBox = document.getElementById("checkedAllBox");
			
			//为全选按钮框绑定点击响应函数
			var checkedAllBtn = document.getElementById("checkedAllBtn");
			checkedAllBtn.onclick = function(){
				for(var i=0;i<items.length ; i++){
					items[i].checked = true;
				}
				
				checkedAllBox.checked = true;
			};
			//为全不选按钮绑定点击响应函数
			var checkedNoBtn = document.getElementById("checkedNoBtn");
			checkedNoBtn.onclick  = function(){
				for(var i=0;i<items.length ; i++){
					items[i].checked = false;
				}
				
				checkedAllBox.checked = false;
			};
			//为反选框绑定点击响应函数
			var checkedRevBtn = document.getElementById("checkedRevBtn");
			checkedRevBtn.onclick = function(){
				
				checkedAllBox.checked = true;
				for(var i=0;i<items.length ; i++){
					items[i].checked = !items[i].checked;
					
					if(!items[i].checked)
						checkedAllBox.checked = false;
				}
				
			};
			//为提交按钮框绑定点击响应函数
			var sendBtn = document.getElementById("sendBtn");
			sendBtn.onclick = function(){
				var str = " ";
				for(var i=0;i<items.length ; i++){
					if(items[i].checked)
						//str保存选中项目的value的值
						str+=" "+items[i].value;
				}
				alert(str);
			};
			
			//为全选/全不选复选框绑定点击响应函数
			checkedAllBox.onclick = function(){
				for(var i=0;i<items.length ;i++)
					//this代表的是全选/全不选复选框的checked的状态
					items[i].checked  = this.checked;
			};
			
			//为四个多选框分别绑定点击响应函数
				for(var i = 0; i < items.length; i++) {
					items[i].onclick = function() {

						//将checkedAllBox设置为选中状态
						checkedAllBox.checked = true;

						for(var j = 0; j < items.length; j++) {
							//判断四个多选框是否全选
							//只要有一个没选中则就不是全选
							if(!items[j].checked) {
								//一旦进入判断，则证明不是全选状态
								//将checkedAllBox设置为没选中状态
								checkedAllBox.checked = false;
								//一旦进入判断，则已经得出结果，不用再继续执行循环
								break;
							}

						}

					};
				}
		};
		
	</script>
	<body>
		<form method="post" action="">
			你爱好的运动是？<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>

jsfantasy

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习之全选反选练习

实现代码：全选练习 window.onload = function(){ //获取所有的item列表 var items =
复制链接

扫一扫