如何在类似层次结构的无序列表中链接复选框元素？

Question

我希望链接我的复选框：当我单击 2 级复选框时，我希望从 3 级开始影响所有复选框。到目前为止，我只能想到这个（我单击了 2 级复选框）： 示例

我的模板如下所示：

<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>

我将事件侦听器添加到使用脚本创建的每个复选框中。我当前的 JS 代码如下所示：

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'));
            });
        })

我认为问题可能在于我在同一级别上同时拥有

<li>

和

<ul>

标签，但我还无法想出解决方案。

Answer 1

我将使用查询选择器来查找所有后代复选框。该解决方案使用输入 id，我认为不允许以数字开头。

document.querySelectorAll("input[type=checkbox]").forEach(checkbox =>
  checkbox.addEventListener('change', function(e) {
    const activeCB = e.target;
    const flag = activeCB.checked;
    const descendants = activeCB.closest("li").querySelectorAll(`input[type=checkbox]`);
    
    descendants.forEach(d => d.checked = flag);
  })

)

<div id="checkbox-list" class="scrollable-list">
  <ul class="checkbox-outer-element">
    <li class="checkbox-inner-element"><input type="checkbox" value="_" id="L1a"><label for="_">Level 1</label>
      <ul class="checkbox-outer-element">
        <li class="checkbox-inner-element"><input type="checkbox" value="_" id="L2a"><label for="_">Level
            2</label>
          <ul class="checkbox-outer-element">
            <li class="checkbox-inner-element"><input type="checkbox" value="71" id="L3a"><label for="_">Level 3</label>
              <ul class="checkbox-outer-element">
                <li class="checkbox-inner-element"><input type="checkbox" value="71:0" id="L4a"><label for="71:0">Level 4</label></li>
                <li class="checkbox-inner-element"><input type="checkbox" value="71:1" id="L4b"><label for="71:1">Level 4</label></li>
                <li class="checkbox-inner-element"><input type="checkbox" value="71:2" id="L4c"><label for="71:2">Level 4</label></li>
                <li class="checkbox-inner-element"><input type="checkbox" value="71:3" id="L4d"><label for="71:3">Level 4</label></li>
              </ul>
            </li>
            <li class="checkbox-inner-element"><input type="checkbox" value="94" id="L3b"><label for="_">Level 3</label>
              <ul class="checkbox-outer-element">
                <li class="checkbox-inner-element"><input type="checkbox" value="94:0" id="L4e"><label for="94:0">Level 4</label></li>
                <li class="checkbox-inner-element"><input type="checkbox" value="94:1" id="L4f"><label for="94:1">Level 4</label></li>
                <li class="checkbox-inner-element"><input type="checkbox" value="94:2" id="L4g"><label for="94:2">Level 4</label></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="checkbox-inner-element"><input type="checkbox" value="_" id="L1b"><label for="_">Level 2</label>
      <ul class="checkbox-outer-element">
        <li class="checkbox-inner-element"><input type="checkbox" value="_" id="L2b"><label for="_">Level 3</label>
          <ul class="checkbox-outer-element">
            <li class="checkbox-inner-element"><input type="checkbox" value="_" id="L3c"><label for="_">Level 4</label></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>