实现多选框联动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51958409/article/details/110220534

/*
 功能：
 	①全选按钮：点击后所有爱好都选中  -- 1.#checkedAllBtn
 	②全不选按钮：点击后所有爱好都选中 -- 2.#checkedNoBtn
 	③反选按钮：点击后所有爱好选中状态反转 -- 3.#checkedRevBtn
 	④提交按钮：点击后依次弹出选中内容 -- 4.#sendBtn
 	⑤全选框：点击后让所有爱好的选中状态和自己一致 -- 5.#checkedAllBox
 	⑥爱好框：点满后将全选框选中，否则取消选中 -- 6.items
*/

<head>
  <script type="text/javascript">

	window.onload = function(){
		// 获取四个多选框
		var items = document.getElementsByName("items")
		// console.log(items)
		// 获取多选框 全选全不选
		var checkedAllBox = document.getElementById("checkedAllBox")
		/* 
			全选
		 */
		// 获取全选按钮
		var checkedAllBtn = document.getElementById("checkedAllBtn")
		// console.log(checkedAllBtn)
		// 给全选按钮注册点击事件
		checkedAllBtn.onclick = function(){
			// 事件触发时
			// 遍历每一个爱好
			for(var i = 0; i < items.length; i++){
				// alert(items[i].checked)
				// 将每一个爱好的状态设置为 默认选中 
				items[i].checked = true
			}
			// 全选全不选多选框为 选中状态
			checkedAllBox.checked = true
		}
		
		/* 
		 全不选
		 */
		// 获取全不选按钮
		var checkedNoBtn = document.getElementById('checkedNoBtn')
		// 给全不选按钮注册点击事件
		checkedNoBtn.onclick = function(){
			// 事件触发时
			// 遍历每一个爱好
			for(var i = 0; i < items.length; i++){
				// alert(items[i].checked)
				// 将每一个爱好的状态设置为 默认不选中 
				items[i].checked = false
			}
			// 全选全不选多选框为 不选中状态
			checkedAllBox.checked = false
		}
		
		/* 
		 全选全不选
		 */
		// 给全选全不选多选框注册点击事件
		checkedAllBox.onclick=function(){
			// console.log(this.checked)
			// 事件触发时
			// 遍历每一个爱好
			for(var i=0;i<items.length;i++){
				//将全选全不选多选框的值赋值给每一个爱好多选框
				items[i].checked = this.checked
				// console.log(items[i].checked)
			}
		}
		
		/* 
		 反选
		 */
		// 获取反选按钮
		var checkedRevBtn = document.getElementById("checkedRevBtn")
		// 给反选按钮注册点击事件
		checkedRevBtn.onclick = function(){
			// 全选全不选多选框为 选中状态
			checkedAllBox.checked= true
			// 事件触发时
			// 遍历每一个爱好
			for(var i=0;i<items.length;i++){
				/* 
				//判断多选框
				if(items[i].checked){
					// 如果当前多选框的状态为 true 则赋值为false
					items[i].checked = false
				}else{
					// 如果当前多选框的状态为 false 则赋值为true
					items[i].checked = true
				} */
				
				// 将当前多选框的状态值取反后在赋值回去
				items[i].checked = !items[i].checked
				// 判断当前多选框的状态是否有为假的状态，如果四个爱好中有一个没有选中则，将  
				// !true false  ！false = true 
				if(!items[i].checked ){
					// 全选全不选多选框设置为 false
					checkedAllBox.checked= false
					// break;
				}
				
			}
			// 判断四个多选框是否全部选中
		}
		
		/* 
			提交按钮 ：当点击提交按钮时 选中的都弹窗
		 */
		var sendBtn = document.getElementById("sendBtn")
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}
		
		/* 
		 items  
			如果四个多选框都被选中，则checkedAllBox选中
			如果四个多选框都被没选中，则checkedAllBox没选中
		 */
		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 ){
						// 全选全不选多选框设置为 false
						checkedAllBox.checked= false
						break;
					}
				}
			}
		}
		
	}
	
  </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>