使用querySelectorAll+闭包+addEventListener实现互斥复选框失败排查

问题场景 #

给定如下ASP.NET WebForm生成的HTML结构（仅可添加mutuallyExclusiveCheckBoxList类，无法修改原有结构）：

<table>
  <tr>
    <td>
      <span id="ctl00_0" class="mutuallyExclusiveCheckBoxList">
        <input id="ctl00_0_0_0" type="checkbox" value="1">
        <label for="ctl00_0_0_0">Option 1</label>
        <input id="ctl00_0_1_0" type="checkbox" value="2">
        <label for="ctl00_0_1_0">Option 2</label>
      </span>
    </td>
  </tr>
  <tr>
    <td>
      <span id="ctl00_1" class="mutuallyExclusiveCheckBoxList">
        <input id="ctl00_1_0_1" type="checkbox" value="1">
        <label for="ctl00_1_0_1">Option 1</label>
        <input id="ctl00_1_1_1" type="checkbox" value="2">
        <label for="ctl00_1_1_1">Option 2</label>
      </span>
    </td>
  </tr>
</table>

需求是让同一span.mutuallyExclusiveCheckBoxList内的复选框实现互斥（勾选一个时自动取消其他勾选），但编写的JS代码未达到预期效果：

function makeCheckboxesMutuallyExclusive(checkbox, checkboxes) {
    return function () {
        if (!checkbox.checked) return;
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i] !== checkbox && checkboxes[i].checked)
                checkboxes[i].checked = false;
        }
    }
}
function mutuallyExclusiveCheckBoxLists() {
    var containers = document.querySelectorAll('span.mutuallyExclusiveCheckBoxList');
    for (var i = 0; i < containers.length; i++) {
        var checkboxes = containers[i].querySelectorAll('input[type=checkbox]');
        for (var j = 0; j < checkboxes.length; j++) {
            var uncheckOthers = makeCheckboxesMutuallyExclusive(checkboxes[j], checkboxes);
            checkboxes[j].addEventListener('change', function () { uncheckOthers(); });
        }
    }
}
mutuallyExclusiveCheckBoxLists();

问题表现 #

• 第一行的复选框完全不互斥；
• 第二行仅在先勾选Option 1再勾选Option 2时生效（自动取消Option 1），反向操作时Option 1无法勾选。

问题根源 #

核心是var变量的函数级作用域导致的闭包陷阱：
在内部的for循环中，用var j声明的变量没有块级作用域，所有的事件处理函数共享同一个uncheckOthers变量。当循环结束时，j的值已经是checkbox数组的长度，所有事件绑定的都是最后一次循环创建的uncheckOthers函数实例，导致：

• 第一行的所有复选框实际绑定的是该行最后一个复选框的处理逻辑；
• 第二行同理，只有最后一个复选框的逻辑生效，反向操作时触发的是错误的处理函数，导致无法勾选。

修正方案 #

方案1：使用立即执行函数(IIFE)创建块级作用域（兼容IE） #

通过IIFE将每次循环的checkboxes[j]和uncheckOthers封装到独立作用域中，避免变量被覆盖：

function makeCheckboxesMutuallyExclusive(checkbox, checkboxes) {
    return function () {
        if (!checkbox.checked) return;
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i] !== checkbox && checkboxes[i].checked)
                checkboxes[i].checked = false;
        }
    }
}
function mutuallyExclusiveCheckBoxLists() {
    var containers = document.querySelectorAll('span.mutuallyExclusiveCheckBoxList');
    for (var i = 0; i < containers.length; i++) {
        var checkboxes = containers[i].querySelectorAll('input[type=checkbox]');
        for (var j = 0; j < checkboxes.length; j++) {
            // 用IIFE包裹，保留当前循环的checkbox和uncheckOthers
            (function(currentCheckbox, currentUncheck) {
                currentCheckbox.addEventListener('change', function () { currentUncheck(); });
            })(checkboxes[j], makeCheckboxesMutuallyExclusive(checkboxes[j], checkboxes));
        }
    }
}
mutuallyExclusiveCheckBoxLists();

方案2：直接将处理函数绑定到事件（简化闭包） #

可以省去makeCheckboxesMutuallyExclusive函数，直接在事件处理中获取当前容器内的复选框，逻辑更直观：

function mutuallyExclusiveCheckBoxLists() {
    var containers = document.querySelectorAll('span.mutuallyExclusiveCheckBoxList');
    for (var i = 0; i < containers.length; i++) {
        var container = containers[i];
        var checkboxes = container.querySelectorAll('input[type=checkbox]');
        for (var j = 0; j < checkboxes.length; j++) {
            checkboxes[j].addEventListener('change', function() {
                if (!this.checked) return;
                // 获取当前容器内的所有复选框
                var siblings = this.parentElement.querySelectorAll('input[type=checkbox]');
                for (var k = 0; k < siblings.length; k++) {
                    if (siblings[k] !== this && siblings[k].checked) {
                        siblings[k].checked = false;
                    }
                }
            });
        }
    }
}
mutuallyExclusiveCheckBoxLists();

方案3：使用let声明变量（兼容ES6+，不支持IE） #

如果不需要兼容IE，可以用let替代var，let具有块级作用域，能自动解决闭包陷阱：

function makeCheckboxesMutuallyExclusive(checkbox, checkboxes) {
    return function () {
        if (!checkbox.checked) return;
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i] !== checkbox && checkboxes[i].checked)
                checkboxes[i].checked = false;
        }
    }
}
function mutuallyExclusiveCheckBoxLists() {
    const containers = document.querySelectorAll('span.mutuallyExclusiveCheckBoxList');
    for (let i = 0; i < containers.length; i++) {
        const checkboxes = containers[i].querySelectorAll('input[type=checkbox]');
        for (let j = 0; j < checkboxes.length; j++) {
            const uncheckOthers = makeCheckboxesMutuallyExclusive(checkboxes[j], checkboxes);
            checkboxes[j].addEventListener('change', uncheckOthers);
        }
    }
}
mutuallyExclusiveCheckBoxLists();

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