全选全不选-1124

全选全不选

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

<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++){
				items[i].checked = true
			}
			checkedAllBox.checked = true
		}
		/* 
		 全不选
		 */
		// 获取全不选按钮
		var checkedNoBtn = document.getElementById("checkedNoBtn")
		console.log(checkedNoBtn)
		checkedNoBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = false
			}
			checkedAllBox.checked = false
		}
		
		/* 
		 全选全不选
		 */
		// 给全选全不选多选框注册点击事件
		checkedAllBox.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = this.checked
			}
		}
		
		/*
			提交按钮 ：当点击提交按钮时 选中的都弹窗
		 */
		var sendBtn = document.getElementById("sendBtn")
		console.log(sendBtn)
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}
		
		/* 
		 反选
		 */
		// 获取反选按钮
		var checkedRevBtn = document.getElementById("checkedRevBtn")
		checkedRevBtn.onclick = function(){
			checkedAllBox.checked = true
			for(var i = 0; i < items.length;i++){
				/* if(items[i].checked){
					items[i].checked = false
				}else{
					items[i].checked = true
				} */
				items[i].checked = !items[i].checked;
				if(!items[i].checked){
					checkedAllBox.checked = false
				}
			}
		}
		
		/* 
		 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++){
					console.log(j)
					/* !true  = false
					!true  = false
					!false = true */
					// 判断如果四个爱好中有一个为false 则全选全不选多选框也为false
					if(!items[j].checked){
						checkedAllBox.checked = false
					}
				}
			}
		}
	}
</script>