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);
                }
            })
        })
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值