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