如何通过JS实现取消Checkbox后隐藏后续.sub类列表？

API 探路者

2026-6-18

解决方案：父级Checkbox取消勾选时隐藏子地点列表

问题定位

之前隐藏代码失效，大概率是子列表选择器范围错误（比如全局查找.sub导致定位到无关元素），或是DOM层级遍历逻辑不对，没精准找到当前父项对应的子列表。

修正后的实现代码

假设你的HTML结构如下（如果结构不同，只需调整选择器的层级匹配逻辑）：

<div class="filter-group">
  <label>
    <input type="checkbox" class="parent-checkbox"> 父地点
  </label>
  <ul class="sub">
    <li><label><input type="checkbox"> 子地点1</label></li>
    <li><label><input type="checkbox"> 子地点2</label></li>
  </ul>
</div>

对应的JavaScript代码：

// 绑定所有父级Checkbox的变更事件
document.querySelectorAll('.parent-checkbox').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 定位当前父项所在的容器，避免影响其他筛选组
    const parentContainer = this.closest('.filter-group');
    
    if (!this.checked) {
      // 1. 取消当前组内所有子Checkbox的勾选状态
      parentContainer.querySelectorAll('.sub input[type="checkbox"]').forEach(childCb => {
        childCb.checked = false;
      });
      // 2. 隐藏当前组内所有带.sub类的子列表
      parentContainer.querySelectorAll('.sub').forEach(subList => {
        subList.style.display = 'none';
      });
    } else {
      // 可选：重新勾选父级时，恢复显示子列表
      parentContainer.querySelectorAll('.sub').forEach(subList => {
        subList.style.display = 'block';
      });
    }
  });
});