基础 - 全选和反选

结构

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



}