JS实现复选框全选校验时点击计数出现NaN问题求解

问题根因 #

• 第一个版本核心问题是事件回调的this指向错误：将this.updateValid直接赋值给复选框的onclick事件时，回调触发时函数内部的this指向被点击的DOM元素，而非你的业务实例对象，访问this.validCheckbox实际是读取DOM上不存在的属性，运算结果自然为NaN。
• 第二个版本的两个错误：
  • 基础类型按值传递，函数内修改参数nb不会同步到实例的validCheckbox属性
  • 绑定时写的this.updateValid(this.validCheckbox)是直接执行函数，而非将函数作为回调绑定给点击事件，因此页面加载就触发一次，点击复选框反而无响应。

修复方案 #

修正事件回调的this指向，同时将被点击的复选框元素作为参数传入处理函数即可：

bind() {
    this.checks = document.getElementsByClassName("checkdoc");
    const len = this.checks.length;
    this.validCheckbox = 0;

    for (let i = 0; i < len; i++) {
        // 箭头函数固定this指向当前实例，同时透传被点击的复选框元素
        this.checks[i].onclick = (e) => this.updateValid(e.target);
    }

    // 初始化判断初始状态是否全选
    if (this.validCheckbox === len) {
        this.allChecked = true;
        this.update();
    }
}

updateValid(checkbox) {
    if (checkbox.checked) {
        this.validCheckbox += 1;
    } else {
        this.validCheckbox -= 1;
    }
    const len = this.checks.length;
    this.allChecked = this.validCheckbox === len;
    if (this.allChecked) {
        this.update();
    }
    console.log('已勾选数量：', this.validCheckbox, '是否全选：', this.allChecked);
}

更稳妥的优化实现 #

不需要维护计数器，每次点击直接遍历所有复选框判断状态，避免动态增减复选框、初始有选中态时计数错配的问题：

bind() {
    this.checks = document.getElementsByClassName("checkdoc");

    // 统一封装全选检测逻辑
    const checkAllSelected = () => {
        this.allChecked = Array.from(this.checks).every(item => item.checked);
        if (this.allChecked) {
            this.update();
        }
        console.log('是否全部勾选：', this.allChecked);
    }

    // 绑定点击事件
    for (let i = 0; i < this.checks.length; i++) {
        this.checks[i].onclick = checkAllSelected;
    }

    // 初始化判断一次初始状态
    checkAllSelected();
}

内容的提问来源于stack exchange，提问作者Devinfo_DH