DOM全选全不选

功能:

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

获取四个多选框

var items = document.getElementsByName("items")

获取多选框全选全不选

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
		}

给全选全不选多选框注册点击事件

checkedAllBox.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = this.checked
			}
		}

提交按钮：当点击提交按钮时选中的都弹窗

var sendBtn = document.getElementById("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
				}
			}
		}

如果四个多选框都被选中，则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
					}
				}
			}
		}

以下为按钮代码

<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>