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

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

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

SEO Keyword Density

SEO关键词密度优化与页面审计技能。使用场景：①提供页面路径与关键词进行SEO优化；②提升页面关键词密度；③提升搜索引擎排名；④进行SEO审计（meta标签、OG、hreflang等）。触发词：关键词密度、SEO优化、关键词优化等。

下载

✅ 核心逻辑说明

• 每个 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">
      <input class="form-check-input" type="checkbox" value="" id="selectAllList1" />
      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">
          <input class="form-check-input" type="checkbox" value="" name="projects" />
          <label class="form-check-label">Add New Project</label>
        </div>
      </li>
      <li class="list-group-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" name="projects" />
          <label class="form-check-label">View Project</label>
        </div>
      </li>
      <li class="list-group-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" name="projects" />
          <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 即可复用。
• 性能优化：对于大量复选框，可考虑防抖或使用事件委托，但常规权限列表（

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