复选框全选同步控制技巧

本文详解了如何用原生 JavaScript 实现复选框组与顶部“全选”复选框的双向实时同步——不仅点击全选框能一键勾选或取消所有子项，当用户手动修改任意子项时，全选框也会智能响应、自动更新状态，精准反映当前选择情况；方案轻量、无依赖、高度可复用，已适配 Bootstrap Accordion 结构，并附有完整可运行代码、关键注意事项及扩展建议，是权限管理、表单配置等场景中提升交互体验与开发效率的实用利器。

本文介绍如何使用原生 JavaScript 实现复选框组与顶部“全选”复选框的双向联动：点击全选框可批量操作子项，任一子项状态变化时自动更新全选框状态（全选时勾选，非全选时取消）。

在权限管理、表单配置等场景中，常需为一组功能项提供“全选/取消全选”控制能力。但仅实现单向绑定（如点击全选框勾选所有子项）是不够的——用户手动取消任意一个子项时，顶部“全选”复选框也应自动取消，以准确反映当前状态。这要求建立双向同步逻辑：既响应全选框变更来批量控制子项，也监听子项变更来实时更新全选框。

以下是一个简洁、可复用的原生 JavaScript 实现方案（无需 jQuery），适配您提供的 Bootstrap Accordion 结构：

✅ 核心逻辑说明

• 每个 Accordion 分组（如 Projects、Project Category）拥有独立的 name 属性（如 "projects"），便于统一选取。
• 使用 querySelectorAll('input[name="xxx"]') 获取该组全部子复选框。
• 为每个子复选框绑定 change 事件：遍历判断是否全部已勾选，据此设置全选框的 checked 状态。
• 为全选框绑定 change 事件：将其 checked 值同步赋给所有子复选框。

✅ 完整可运行示例（适配您的 HTML 结构）

<!-- 示例：Projects 分组（其他分组同理） -->
<div class="accordion-item">
  <h2 class="accordion-header" id="flush-headingOne">
    <button class="accordion-button collapsed gap-3" type="button"
      data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
      aria-expanded="false" aria-controls="flush-collapseOne">
      &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;selectAllList1&quot; /&gt;
      Projects
    </button>
  </h2>
  <div id="flush-collapseOne" class="accordion-collapse collapse"
       aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="form-check">
          &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; name=&quot;projects&quot; /&gt;
          <label class="form-check-label">Add New Project</label>
        </div>
      </li>
      <li class="list-group-item">
        <div class="form-check">
          &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; name=&quot;projects&quot; /&gt;
          <label class="form-check-label">View Project</label>
        </div>
      </li>
      <li class="list-group-item">
        <div class="form-check">
          &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; name=&quot;projects&quot; /&gt;
          <label class="form-check-label">Edit Project</label>
        </div>
      </li>
    </ul>
  </div>
</div>

// 初始化 Projects 分组的双向同步
function initCheckboxGroup(groupName, toggleId) {
  const items = document.querySelectorAll(`input[name="${groupName}"]`);
  const toggle = document.querySelector(`#${toggleId}`);

  if (!items.length || !toggle) return;

  // 子项变更 → 更新全选框状态
  items.forEach(item => {
    item.addEventListener('change', () => {
      const allChecked = Array.from(items).every(cb => cb.checked);
      toggle.checked = allChecked;
    });
  });

  // 全选框变更 → 同步所有子项
  toggle.addEventListener('change', () => {
    items.forEach(item => item.checked = toggle.checked);
  });
}

// 为各分组分别初始化（确保 DOM 加载完成后再执行）
document.addEventListener('DOMContentLoaded', () => {
  initCheckboxGroup('projects', 'selectAllList1');
  initCheckboxGroup('projectCategory', 'selectAllList2');
  initCheckboxGroup('projectType', 'selectAllList3');
});

⚠️ 注意事项

• ID 唯一性：确保每个 id="selectAllListX" 在页面中唯一（您原始代码中多个
• 内使用了重复的 id="list1"，虽不影响功能但不符合 HTML 规范，建议改为 class 或移除）。
• 执行时机：务必在 DOM 加载完成后调用初始化函数（如使用 DOMContentLoaded），否则 querySelector 可能返回 null。
• 扩展性：该 initCheckboxGroup 函数支持任意数量的分组，只需传入对应的 name 和 id 即可复用。
• 性能优化：对于大量复选框，可考虑防抖或使用事件委托，但常规权限列表（<100 项）无需额外优化。

通过以上方案，您将获得一个健壮、语义清晰且易于维护的双向复选框同步机制，彻底解决“取消任一子项后全选框状态不同步”的问题。

今天关于《复选框全选同步控制技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！