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

时间：2021-11-21 08:54:31

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

全选与取消全选

现在有如下的表格，有三个tab account，drive，qing，每个tab下面的数据结构大同小异
HTML实现checkbox全选/取消与子类监听
我们希望点击表头的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所示HTML实现checkbox全选/取消与子类监听：

根据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所示：
HTML实现checkbox全选/取消与子类监听

标签：

相关文章