基础 - 全选和反选

结构

<div class="order">
 <button id="allSelect">全选</button>
 <button id="allUnSelect">取消</button>
 <button id="retrySelect">反选</button>
</div>
<div class="showBox">
 <ul>
 <li><input type="checkbox" /></li>
 <li><input type="checkbox" /></li>
 <li><input type="checkbox" /></li>
 <li><input type="checkbox" /></li>
 <li><input type="checkbox" /></li>
 </ul>
</div>

样式

ul {
    list-style-type: none;
margin: 0;
padding: 0;
}

行为

window.onload = function () {
 function change(aDiv,bIsCheck) {
 for(var i= 0,l=aDiv.length;i<l;i++) {
 aDiv[i].checked = bIsCheck;
}
 }
 var oAllSelect = document.getElementById("allSelect");
var oAllUnSelect = document.getElementById("allUnSelect");
var oRetrySelect = document.getElementById("retrySelect");
var aShowBox = document.getElementsByClassName("showBox");
var aInput = aShowBox[0].getElementsByTagName("input");

oAllSelect.onclick = function () {
 change(aInput,true);
}
 oAllUnSelect.onclick = function () {
 change(aInput,false);
}
 oRetrySelect.onclick = function() {
 for(var i= 0,l=aInput.length;i<l;i++) {
 aInput[i].checked = !aInput[i].checked;
}
 }



}

转载于:https://www.cnblogs.com/WeWeZhang/p/5729843.html