如何用JavaScript实现HTML TreeView的Checkbox联动选中功能

开发基于ASP.NET Core的Web应用，需实现带Checkbox的HTML TreeView，要求点击父节点Checkbox时自动选中/取消所有子节点Checkbox。目前展开子节点的功能正常，但联动选中的脚本无法生效，Checkbox的点击事件和选中操作本身经测试是有效的。

现有代码中，负责联动的脚本如下：

var toggler = document.getElementsByClassName("checker");
var i;
for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function () {
        var lis = this.parentElement.getElementsByClassName(".nested").children;
        var j;
        for (j = 0; j < lis.length) {
            var toggler2 = lis.getElementsByClassName("checker");
            var k;
            for (k = 0; k < toggler2.length; k++) { 

                toggler2[k].click();
            }
        }
    });
}

• getElementsByClassName参数错误：使用getElementsByClassName(".nested")时，不需要加.，直接写"nested"即可，因为方法参数是类名，不是选择器。
• 循环语法错误：for (j = 0; j < lis.length)缺少递增语句j++，循环会无限执行。
• 子元素获取逻辑错误：this.parentElement.getElementsByClassName("nested")返回的是HTMLCollection，不能直接访问.children，需要先取到对应的ul元素，再查找其下的所有Checkbox。
• 使用click()触发事件易递归：直接调用子Checkbox的click()会再次触发其点击事件，可能导致逻辑混乱，应该直接设置checked属性同步状态。

替换原来的第二个脚本，使用以下代码：

// 为所有Checkbox绑定点击事件
document.querySelectorAll('.checker').forEach(checkbox => {
    checkbox.addEventListener('click', function() {
        // 获取当前Checkbox所在li下的第一个嵌套ul
        const nestedUl = this.parentElement.querySelector('.nested');
        if (!nestedUl) return;
        
        // 查找嵌套ul下所有的子Checkbox
        const childCheckboxes = nestedUl.querySelectorAll('.checker');
        // 同步子Checkbox的选中状态与当前父Checkbox一致
        childCheckboxes.forEach(child => {
            child.checked = this.checked;
        });
    });
});

代码说明 #

• 使用querySelectorAll更方便获取元素，返回的NodeList可以直接用forEach遍历。
• 点击父Checkbox时，先找到其对应的嵌套列表nestedUl，如果没有则直接返回。
• 查找该嵌套列表下所有的子Checkbox，将它们的checked属性设置为与父Checkbox相同，实现联动选中/取消。
• 避免使用click()触发事件，防止递归调用，逻辑更清晰稳定。

额外优化（可选） #

如果需要实现子节点全部选中时父节点自动选中，子节点有未选中时父节点取消选中的反向联动，可以添加以下代码：

// 反向联动：子节点影响父节点状态
document.querySelectorAll('.checker').forEach(checkbox => {
    checkbox.addEventListener('click', function() {
        // 获取当前Checkbox的父级li
        const parentLi = this.closest('li');
        // 获取父级li的父级ul，再找到该ul对应的父Checkbox
        const parentUl = parentLi.parentElement;
        const parentCheckbox = parentUl.previousElementSibling?.querySelector('.checker');
        
        if (!parentCheckbox) return;
        
        // 获取当前父节点下的所有直接子Checkbox
        const siblingCheckboxes = parentUl.querySelectorAll('.checker');
        // 判断所有子Checkbox是否都被选中
        const allChecked = Array.from(siblingCheckboxes).every(cb => cb.checked);
        // 设置父Checkbox的状态
        parentCheckbox.checked = allChecked;
    });
});

内容的提问来源于stack exchange，提问作者Roger Almirall Jou