如何实现层级无序列表中复选框的联动效果？

我需要实现复选框的联动功能：点击Level 2复选框时，Level 3及以下层级的所有复选框同步被选中/取消，目前仅实现了部分效果。

我的HTML模板 #

<div id="checkbox-list" class="scrollable-list">
    <ul class="checkbox-outer-element">
        <li class="checkbox-inner-element"><input type="checkbox" value="_" id="_"><label for="_">Level 1</label>
            <ul class="checkbox-outer-element">
                <li class="checkbox-inner-element"><input type="checkbox" value="_" id="_"><label for="_">Level
                        2</label>
                    <ul class="checkbox-outer-element">
                        <li class="checkbox-inner-element"><input type="checkbox" value="71" id="71"><label
                                for="_">Level 3</label>
                            <ul class="checkbox-outer-element">
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:0" id="71:0"><label
                                        for="71:0">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:1" id="71:1"><label
                                        for="71:1">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:2" id="71:2"><label
                                        for="71:2">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="71:3" id="71:3"><label
                                        for="71:3">Level 4</label></li>
                            </ul>
                        </li>
                        <li class="checkbox-inner-element"><input type="checkbox" value="94" id="94"><label
                                for="_">Level 3</label>
                            <ul class="checkbox-outer-element">
                                <li class="checkbox-inner-element"><input type="checkbox" value="94:0" id="94:0"><label
                                        for="94:0">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="94:1" id="94:1"><label
                                        for="94:1">Level 4</label></li>
                                <li class="checkbox-inner-element"><input type="checkbox" value="94:2" id="94:2"><label
                                        for="94:2">Level 4</label></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="checkbox-inner-element"><input type="checkbox" value="_" id="_"><label for="_">Level 2</label>
            <ul class="checkbox-outer-element">
                <li class="checkbox-inner-element"><input type="checkbox" value="_"
                        id="_"><label for="_">Level 3</label>
                    <ul class="checkbox-outer-element">
                        <li class="checkbox-inner-element"><input type="checkbox" value="_"
                                id="_"><label for="_">Level 4</label></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

当前JavaScript代码 #

checkbox.addEventListener('change', function () {
    var flag = this.checked
    var nestedCheckboxes = this.parentElement.querySelector('.checkbox-inner-element').querySelectorAll('ul li input[type="checkbox"]');
    nestedCheckboxes.forEach(function (checkbox) {
        checkbox.checked = flag;
        checkbox.dispatchEvent(new Event('change'));
    });
})

问题分析与解决方案 #

问题根源 #

原代码的选择器逻辑错误：this.parentElement.querySelector('.checkbox-inner-element')试图在当前复选框的父元素（即.checkbox-inner-element的li）中直接查找子级.checkbox-inner-element，但子层级的复选框实际位于该li下的ul.checkbox-outer-element内的li中，导致无法选中所有后代复选框。

修正后的代码 #

// 获取所有复选框并绑定事件
const allCheckboxes = document.querySelectorAll('#checkbox-list input[type="checkbox"]');

allCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const isChecked = this.checked;
        // 找到当前复选框所在的最外层li容器
        const parentLi = this.closest('.checkbox-inner-element');
        // 获取该容器下所有后代复选框，排除自身
        const nestedCheckboxes = parentLi.querySelectorAll('input[type="checkbox"]');
        
        nestedCheckboxes.forEach(nested => {
            if (nested !== this) {
                nested.checked = isChecked;
                // 若需要触发子复选框的change事件（比如有其他联动逻辑），保留此行
                nested.dispatchEvent(new Event('change'));
            }
        });
    });
});

说明 #

• 使用closest('.checkbox-inner-element')精准定位当前复选框所在的层级容器，确保能覆盖所有后代层级。
• 通过querySelectorAll('input[type="checkbox"]')获取该容器下所有后代复选框，排除自身避免循环触发。
• 此逻辑支持任意层级的复选框联动，不仅限于Level 2，点击任意父级复选框都会同步其下所有子级复选框状态。

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