JS:全选练习

最新推荐文章于 2022-04-07 09:21:02 发布
原创最新推荐文章于 2022-04-07 09:21:02 发布 · 212 阅读
CC 4.0 BY-SA版权
在这里插入图片描述
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>全选练习</title>
		<script type="text/javascript">	
			window.onload = function(){
				//全选按钮:点击按钮后，四个多选框全都被选中
				//1.#checkedAllBtn
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function(){
					//获取四个多选框
					var items = document.getElementsByName("items");
					//遍历items
					for(var i=0;i<items.length;i++){
						//设置为选中状态
						items[i].checked = true;
					}
					//设置  全选/全不选 多选框
					checkedAllBox.checked=true;
				}
				
				//全不选按钮:点击按钮后，四个多选框全都不被选中
				//2.#checkedNoBtn
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function(){
					//获取四个多选框
					var items = document.getElementsByName("items");
					//遍历items
					for(var i=0;i<items.length;i++){
						//设置为没选中状态
						items[i].checked = false;
					}
					//设置  全选/全不选 多选框
					checkedAllBox.checked=false;
				}
				
				//反选按钮
				//3.#checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function(){
					//获取四个多选框
					var items = document.getElementsByName("items");
					//遍历items
					for(var i=0;i<items.length;i++){
						//设置为相反状态
						items[i].checked = !items[i].checked;
					}
					if(items[0].checked&&items[1].checked&&items[2].checked&&items[3].checked)
						checkedAllBox.checked=true;
					else
						checkedAllBox.checked = false;
				}
				
				//提交按钮
				//4.#sendBtn
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function(){
					//获取四个多选框
					var items = document.getElementsByName("items");
					//遍历items
					for(var i=0;i<items.length;i++){
						if(items[i].checked)
							alert(items[i].value);
						
					}
				}
				
				/*
				全选/全不选 多选框
				当全选选中，其余的也选中
				当全不选选中，其余的也不选中
				*/
				//5.#checkedAllBox
				var checkedAllBox = document.getElementById("checkedAllBox");
				checkedAllBox.onclick = function(){
					//获取四个多选框
					var items = document.getElementsByName("items");
					//遍历items
					for(var i=0;i<items.length;i++){
						//设置为 全选/全不选 多选框 的状态
						items[i].checked = checkedAllBox.checked;
					}
					
				}
				
				/*
				当四个多选框状态发生变化时，全选/全不选 多选框 也要发生相应变化
				如果四个多选框全都选中，则  全选/全不选 多选框  也应该选中
				如果四个多选框没全都选中，则  全选/全不选 多选框  不应该选中
				*/
				//6.items
				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++){
							checkedAllBox.checked=checkedAllBox.checked&items[j].checked;
						}
					}
				}				
			}
			
		</script>
	</head>
	<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>