JavaScript Web API 全選反選案例

時間 2019-12-08

標籤 javascript web api 全選案例欄目 JavaScript 简体版

原文原文鏈接

全選反選

全選和反選功能，在開發中能夠說是應用得很是多的，如下經過案例分解，學習如何使用JS實現全選反選功能。css

該功能可分爲以下三大步驟：html

一、全選學習

1.1 獲取父checkbox，註冊點擊事件this

1.2 獲取全部的子checkbox，讓全部子checkbox的狀態跟父checkbox保持一致spa

html和css代碼code

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .wrap {
        width: 300px;
        margin: 100px auto 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 300px;
    }

    th,
    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }

    th {
        background-color: #09c;
        font: bold 16px "微軟雅黑";
        color: #fff;
    }

    td {
        font: 14px "微軟雅黑";
    }

    tbody tr {
        background-color: #f0f0f0;
    }

    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>

<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll"/>
                </th>
                <th>商品</th>
                <th>價錢</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>小米Mix2s</td>
                <td>3000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>華爲P30</td>
                <td>3800</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>小米手環</td>
                <td>200</td>
            </tr>

        </tbody>
    </table>
    <input type="button" value="  反 選  " id="btn">
</div>

// 一、全選
// 父checkbox,子checkbox
// 1.1 獲取父checkbox，註冊點擊事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
    // 1.2 獲取全部的子checkbox，讓全部子checkbox的狀態跟父checkbox保持一致
    var j_tb = document.getElementById('j_tb');
    var inputs = j_tb.getElementsByTagName('input');
    //遍歷，將全部子checkbox狀態改成跟父checkbox狀態一致
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.type === 'checkbox') {
            //將子checkbox狀態跟父checkbox狀態保持一致
            input.checked = this.checked;
        }
    }
}

二、當點擊子checkbox，若是全部的子checkbox已經被選中，則選中父checkbox，若是有一個子checkbox沒有被選中，則不選中父checkboxhtm

（1）循環，判斷是不是複選框，如果，則註冊點擊事件blog

（2）點擊按鈕時，判斷全部的子checkbox是否都選中，若是都選中，則父checkbox狀態設置爲選中，若是有一個子checkbox沒選中，則父checkbox設置爲不選中事件

如下代碼是在第一步驟基礎上寫的，包括了第一部分的代碼ci

var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
var j_cbAll = document.getElementById('j_cbAll');
// 一、全選
// 父checkbox,子checkbox
// 1.1 獲取父checkbox，註冊點擊事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
    // 1.2 獲取全部的子checkbox，讓全部子checkbox的狀態跟父checkbox保持一致

    //遍歷，將全部子checkbox狀態改成跟父checkbox狀態一致
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.type === 'checkbox') {
            //將子checkbox狀態跟父checkbox狀態保持一致
            input.checked = this.checked;
        }
    }
}

//1.3 當有一個子checkbox沒有被選中時，父checkbox應當不選中，當全部的子checkbox都選中時，應當選中父checkbox
// 給每個子checkbox註冊事件
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    //若是不是複選框，則不綁定事件
    if (input.type !== 'checkbox') {
        continue;
    }
    input.onclick = function () {
        //假設全部子checkbox都已經選中
        var allChecked = true;
        console.log(inputs);
        //判斷全部子checkbox是否選中
        for (var j = 0; j < inputs.length; j++) {
            var input = inputs[j];
            //若是不是複選框，則跳到寫一次循環
            if (input.type !== 'checkbox') {
                continue;
            }
            if (!input.checked) {
                allChecked = false;//若是有沒選中的
                break;
            }
        }

        //同步父checkbox和子checkbox的狀態
        j_cbAll.checked = allChecked;
    }
}

三、反選

當點擊反選按鈕時，將全部的子的checkbox狀態取反，而後同步父的checkbox的狀態。如下代碼是在第二步驟基礎上寫的，包括了第二部分的代碼

var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
var j_cbAll = document.getElementById('j_cbAll');
// 一、全選
// 父checkbox,子checkbox
// 1.1 獲取父checkbox，註冊點擊事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
    // 1.2 獲取全部的子checkbox，讓全部子checkbox的狀態跟父checkbox保持一致

    //遍歷，將全部子checkbox狀態改成跟父checkbox狀態一致
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.type === 'checkbox') {
            //將子checkbox狀態跟父checkbox狀態保持一致
            input.checked = this.checked;
        }
    }
}

//1.3 當有一個子checkbox沒有被選中時，父checkbox應當不選中，當全部的子checkbox都選中時，應當選中父checkbox
// 給每個子checkbox註冊事件
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    //若是不是複選框，則不綁定事件
    if (input.type !== 'checkbox') {
        continue;
    }
    input.onclick = function () {
        checkAllCheckBox();
    }
}

// 二、反選
// 一、給反選按鈕註冊事件
var btn = document.getElementById('btn');
btn.onclick = function () {
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        // 二、判斷是不是checkbox
        if (input.type !== 'checkbox') {
            continue;
        }
        // 三、給全部的子checkbox反選
        input.checked = !input.checked;
    }

    // 問題：當選中或取消全部子checkbox時，父checkbox沒改變狀態
    // 四、判斷父的checkbox的狀態，根據該狀態同步父子checkbox狀態
    checkAllCheckBox();

}


//封裝子checkbox和父checkbox的狀態同步功能
function checkAllCheckBox() {
    //假設全部子checkbox都已經選中
    var allChecked = true;
    //判斷全部子checkbox是否選中
    for (var j = 0; j < inputs.length; j++) {
        var input = inputs[j];
        //若是不是複選框，則不綁定事件
        if (input.type !== 'checkbox') {
            continue;
        }
        if (!input.checked) {
            allChecked = false;//若是有沒選中的
        }
    }
    //同步父checkbox和子checkbox的狀態
    j_cbAll.checked = allChecked;
}