批量选择

全选、取消选中、反选

通过DOM操作来实现全选、取消选中、反选。
封装函数的简单应用。

代码如下

HTML代码

<div id="panel">
			<section class="panel-heading">
				<h2>我喜欢的歌曲</h2>
				<hr >
			</section>
			<section class="panel-content">
				<label><input type="checkbox" /></label>1.只是太爱你<br />
				<label><input type="checkbox" /></label>2.不必在乎我是谁<br />
				<label><input type="checkbox" /></label>3.为你我受冷风吹<br />
				<label><input type="checkbox" /></label>4.漂洋过海来看你<br />
				<label><input type="checkbox" /></label>5.当爱已成往事<br />
				<label><input type="checkbox" /></label>6.我终于失去了你<br />
				<label><input type="checkbox" /></label>7.爱情转移<br />
				<label><input type="checkbox" /></label>8.富士山下<br />
				<label><input type="checkbox" /></label>9.see you again<br />
				<label><input type="checkbox" /></label>10.处处吻<br />
				<label><input type="checkbox" /></label>11.飘向北方<br />
				<label><input type="checkbox" /></label>12.庆功酒<br />
				<label><input type="checkbox" /></label>13.差不多姑娘<br />
			</section>
			<section class="panel-footer">
				<hr >
				<button id="allSelect" type="button">全选</button>
				<button id="cancelSelect" type="button">取消选中</button>
				<button id="reverseSelect" type="button">反选</button>
			</section>
		</div>

*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#panel{
				width: 400px;
				box-shadow: 0 0 10px #000000;
				margin: 100px auto;
				padding: 20px;
			}
			.panel-heading{
				text-align: center;
				margin-bottom: 10px;
			}
			.panel-footer{
				text-align: center;
				margin-top: 10px;
			}

window.onload = function(){
				//1.获取所有的复选框
				var inputs = document.querySelectorAll("input");				
				
				//2.全选
				$("allSelect").addEventListener("click",function(){
					for(var i=0;i<inputs.length;i++){
						var input = inputs[i];
						input.checked = true;
					}
				});
				//3.取消选中
				$("cancelSelect").addEventListener("click",function(){
					for(var i=0;i<inputs.length;i++){
						var input = inputs[i];
						input.checked = false;
					}
				});
				//4.反选
				$("reverseSelect").addEventListener("click",function(){
					for(var i=0;i<inputs.length;i++){
						var input = inputs[i];
						input.checked = !input.checked;
					}
				});
				
				//封装函数，获取元素的id
				function $(id){
					//需要判断id是否是string类型
					return typeof id === "string" ? document.getElementById(id)	: null;																
				}
			}