js原生实现全选反选

js原生实现全选反选

<span>全选：</span><input type="checkbox" id="checkAll">
<div id="content">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

// 全选框
var checkAll = document.querySelector("#checkAll")
// 复选框
var aCheck = document.querySelector("#content").children
// n表示当前有几个checkbox被选中,初始为0
var n = 0
// 全选改变时
checkAll.onchange = function() {
    // 如果此时全选是选中的，那么就将清空
    // 如果此时全选是未选中的，那么都要被选中
    n = checkAll.checked ? aCheck.length : 0
    // 让所有的checkbox与全选的选中状态一致
    for (var i = 0; i < aCheck.length; i++) {
        aCheck[i].checked = checkAll.checked;
    }
}
for (var j = 0; j < aCheck.length; j++) {
    aCheck[j].onchange = function() {
        // 某个复选框被选中时 n加一
        // 某个复选框被取消选中时 n减一
        this.checked ? n++ : n--
        // n === aCheck.length时，全选框要被选中
        checkAll.checked = n === aCheck.length
    }
}