js全选、反选

概述

前端实现表单全选，反选功能的案例还是蛮多的，为了方便以后复用，这里对其做个总结:

效果图总览：

html代码块：

<table>
    <!--    表头-->
    <thead>
    <tr>
        <td><input type="checkbox"/></td>
        <td>商品名称</td>
        <td>价格</td>
    </tr>
    </thead>
    <!--    表体-->
    <tbody>
    <tr>
        <td><input type="checkbox"/></td>
        <td>苹果</td>
        <td>3$</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>西瓜</td>
        <td>4$</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>猕猴桃</td>
        <td>5$</td>
    </tr>
    </tbody>
</table>

css样式代码块：

table {
    margin: 0 auto;
    margin-top: 100px;
    width: 400px;
}

table thead {
    background-color: #0078d7;
}

table tbody {
    background-color: #6ac0da;
}

table thead tr td,
table tbody tr td {
    text-align: center;
}

方式1 js 原生处理

思路：全选/反选核心思想莫过于通过父复选框状态改变间接改变所有子复选框的状态，而父复选框的状态则通过每次对子复选框的状态的审查来改变。因此整个过程主要涉及到内容为：循环遍历子复选框、复选框的checked值。
代码如下：

// 获取表头复选框
var headCheck = document.querySelector('thead').querySelector('input');
// 获取表体复选框集合
var bodyCheck = document.querySelector('tbody').querySelectorAll('input');

//全选/反选点击事件
headCheck.onclick = function () {
    //根据父复选框状态改变子复选框状态
    for (var i = 0; i < bodyCheck.length; i++) {
        bodyCheck[i].checked = this.checked;
    }
}

// 单选/子复选框全选之后触发事件
for (var i = 0; i < bodyCheck.length; i++) {
    bodyCheck[i].onclick = function () {
        //状态位
        var flag = true;
        for (var i = 0; i < bodyCheck.length; i++) {
            //复选框没有选择
            if(!bodyCheck[i].checked) { //只要有一个子复选框没有被选上，则父复选框则不被选上
                 flag = false;
            }
        }
        headCheck.checked = flag;
    }
}

注意点： flag标志位，不应该放于子复选框点击处理事件外层，原因：多个子复选框公用一个flag标志位会导致状态错乱，以至于不能正确修改父复选框的状态。

方法二：jQuery处理

 $(function () {
            // 全选/反选点击事件
            $('thead input').click(function () {
                $('tbody tr input').attr('checked', $(this)[0].checked);
            })

            // 单选/子复选框全选之后触发事件
            $('tbody tr input').click(function () {
                // 标记是否被修改过
                let flag = true;
                for (let i = 0; i < $('tbody tr input').length; i++) {
                    // 如果不是当前点击元素 且当前元素选取状态和其他的选取状态不一致则表明不是全选/也不是全不选状态，则不能对tbody中的复选框进行操作
                    if (i != $(this).index && $('tbody tr input').eq(i).prop('checked') != $(this).prop('checked')) {
                        flag = false;
                    }
                }
                // 如果子复选框的状态一致，则改变父复选框的状态
                if (flag) {
                    $('thead input').attr('checked', $(this).prop('checked'));
                } else {
                    $('thead input').attr('checked', false);
                }
            })
        })