批量选择

批量选择"/>

批量选择

全选、取消选中、反选

通过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;}});//封装函数，获取元素的idfunction $(id){//需要判断id是否是string类型return typeof id === "string" ? document.getElementById(id)	: null;																}}