JS实现CheckBox 全选、反选、全不选

HTML部分 勾选框

<button onclick="selectAll()">全选</button>
<button onclick="selectInvert()">反选</button>
<button onclick="unselectAll()">全不选</button>

<div>
    <label>第一个</label>
    <input type="checkbox">
</div>

<div>
    <label>第二个</label>
    <input type="checkbox">
</div>

<div>
    <label>第三个</label>
    <input type="checkbox">
</div>

<div>
    <label>第四个</label>
    <input type="checkbox">
</div>

<div>
    <label>第五个</label>
    <input type="checkbox">
</div>

JS部分

// 全选
function selectAll() {
    // 获取到body中所有checkbox
    var checkbox = document.body.querySelectorAll("input[type='checkbox']");
    var checkboxNum = checkbox.length;
    for (var i = 0; i < checkboxNum; i ++ ) {
        checkbox[i].checked = true;
    }
}
// 反选
function selectInvert() {
    var checkbox = document.body.querySelectorAll("input[type='checkbox']");
    var checkboxNum = checkbox.length;
    for (var i = 0; i < checkboxNum; i ++ ) {
        // 取反自身的状态
        checkbox[i].checked = !checkbox[i].checked;
    }
}

// 全不选
function unselectAll() {
    var checkbox = document.body.querySelectorAll("input[type='checkbox']");
    var checkboxNum = checkbox.length;
    for (var i = 0; i < checkboxNum; i ++ ) {
        checkbox[i].checked = false;
    }
}

同样功能，jQuery实现

function selectAll() {
    var checkbox = $("input[type='checkbox']");
    checkbox.each(function() {
        $(this).prop("checked", true);
    })
}
function selectInvert() {
    var checkbox = $("input[type='checkbox']");
    checkbox.each(function() {
        var status = !$(this).prop("checked");
        $(this).prop("checked", status);
    })
}
function unselectAll() {
    var checkbox = $("input[type='checkbox']");
    checkbox.each(function() {
        $(this).prop("checked", false);
    })
}