JavaScript Web API 全选反选案例

全选反选

全选和反选功能，在开发中可以说是应用得非常多的，以下通过案例分解，学习如何使用JS实现全选反选功能。

该功能可分为如下三大步骤：

1、全选

1.1 获取父checkbox，注册点击事件

1.2 获取所有的子checkbox，让所有子checkbox的状态跟父checkbox保持一致

 

html和css代码

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

 

// 1、全选
// 父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;
        }
    }
}

2、 当点击子checkbox，如果所有的子checkbox已经被选中，则选中父checkbox，如果有一个子checkbox没有被选中，则不选中父checkbox

（1）循环，判断是否是复选框，若是，则注册点击事件

（2）点击按钮时，判断所有的子checkbox是否都选中，如果都选中，则父checkbox状态设置为选中，如果有一个子checkbox没选中，则父checkbox设置为不选中

以下代码是在第一步骤基础上写的，包括了第一部分的代码

var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
var j_cbAll = document.getElementById('j_cbAll');
// 1、全选
// 父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;
    }
}

3、反选

当点击反选按钮时，将所有的子的checkbox状态取反，然后同步父的checkbox的状态。 以下代码是在第二步骤基础上写的，包括了第二部分的代码

var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
var j_cbAll = document.getElementById('j_cbAll');
// 1、全选
// 父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();
    }
}

// 2、反选
// 1、给反选按钮注册事件
var btn = document.getElementById('btn');
btn.onclick = function () {
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        // 2、判断是否是checkbox
        if (input.type !== 'checkbox') {
            continue;
        }
        // 3、给所有的子checkbox反选
        input.checked = !input.checked;
    }

    // 问题：当选中或取消所有子checkbox时，父checkbox没改变状态
    // 4、判断父的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;
}

全选和反选小结：

1、给反选按钮注册事件

2、判断是否是checkbox

3、给所有的子checkbox反选

4、判断父的checkbox的状态，根据该状态同步父子checkbox状态