原生JavaScript----CheckBox全选、反选等功能实现

最近突发奇想，回过头来看看原生js,看到这里，拉出来回忆回忆~~~~

HTML部分

<form action="">
		您爱好的运动是？<input type="checkbox"  id = "checkboxs"/>全选/全不选 <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 id="checkAllbox" type="button" value="全选"/>
		<input id="checkNotbox" type="button" value="全不选"/>
		<input id="checkRevbox" type="button" value="反选"/>
		<input id="checkSumbit" type="button" value="提交"/>		
	</form>

js部分

		<script>
			window.onload = function() {
				let checkAll = document.getElementById('checkAllbox');
				let box = document.getElementsByName('items');
				let checkNot = document.getElementById('checkNotbox');
				let checkRev = document.getElementById('checkRevbox');
				let checkSumbit = document.getElementById('checkSumbit');
				// 全选
				checkAll.onclick = function() {
					box.forEach((item) => {
						item.checked = true;
					})
					checkboxs.checked = true;
				}
				// 全不选
				checkNot.onclick = function() {
					box.forEach((item) => {
						item.checked = false;
					})
					checkboxs.checked = false;
				}
				// 反选
				checkRev.onclick = function() {
					box.forEach((item) => {
						item.checked = !item.checked;
						checkboxs.checked = true;
		    			box.forEach((v) => {
		    				if (!v.checked) {
								checkboxs.checked = false;
							}
		    			})
					})
					
				}
				// 提交
				checkSumbit.onclick = function() {
					box.forEach((item) => {
						if (item.checked) {
						  alert(item.value)
						}
						
					})
				}
			    // 全选/全不选
			    checkboxs.onclick = function() {
			    	box.forEach((item) => {
						item.checked = this.checked;
					})
			    }
		    	// items
		    	box.forEach((item) => {
		    		item.onclick = function() {
		    			checkboxs.checked = true;
		    			box.forEach((v) => {
		    				if (!v.checked) {
								checkboxs.checked = false;
							}
		    			})
		    			
		    		}		    		

				})
			}
		</script>