HTML实现checkbox全选/取消与子类监听

在前端开发的过程中,特别是数据表格的处理,我们经常碰到checkbox全选与取消以及动态的根据子类的选中状态确定全选checkbox是否“checked”

全选与取消全选

现在有如下的表格,有三个tab account,drive,qing,每个tab下面的数据结构大同小异
这里写图片描述
我们希望点击表头的checkbox实现下方数据的全选和取消,实现方式相对比较简单,思路是我们对thead中的checkbox设置监听,当他的状态为checked=true的时候,则表格中其他的checkbox的状态也为checked,反之则是false,实现代码如下

//全选与取消全选
let ischecked = false;
function ischeckall() {
    if (ischecked) {
        $('div.active input[type="checkbox"]').each(function () {
            this.checked = false;
        });
        ischecked = false;
    }else {
        $('div.active input[type="checkbox"]').each(function () {
            this.checked = true;
        });
        ischecked = true;
    }
}

实现的结果如下gif所示这里写图片描述

根据tbody-checkbox设置thead-checkbox的状态

当然我们实现这个功能还是不够的,考虑以下2个常用场景,

场景1:如果用户在全选完之后,把tbody中的部分行数据“取消”了选中;
场景2:用户通过手动点击行内的checkbox最终实现了“全选”的状态;

显然我们的上述代码是无法做到这个需求的,这时候就得需要对tbody中的checkbox设置监听,先说思路,我们监听tbody中的checkbox,检测到他的状态有“change”,那么这个时候我们就获取当前tbody中有多少行数据得到一个total_val,然后再获取checkbox状态为“checked”的input有多少得到exact_val,通过对比这两个值是否相等,再设置thead中的checkbox的状态。据前端大佬指导,根据后台返回的数据量进行比对效率更高,博主这种直接获取dom的实现方式比较low,大家可以自行选择。

function listencheckbox() {
    $('div tbody input[type="checkbox"]').on('change', function () {
        //总量
        let total = $('div.active tbody input[type="checkbox"]').length;
        //实际被选中的
        let exact = $('div.active tbody input[type="checkbox"]:checked').length;
        //检测所有的check选项的有多少与总量进行对比
        $('div.active thead input[type="checkbox"]').get(0).checked = (total === exact);
    });
}

这段代码的意思是当“数据渲染完成”之后,对三个tab(account, drive, qing)下面的所有的tbody中的checkbox都设置了同样的监听事件,当这种checkbox状态改变时,注意,这里我只会获取当前tab页面上的checkbox的数量,也就是选择器中为“active”的,这样就避免了对其他两个tab(非active)表格的影响,最后设置当前active页面的thead的checkbox的属性。最终的实现效果如下gif所示:
这里写图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值