本文介绍如何使用原生 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">
<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" 在页面中唯一（您原始代码中多个 <li> 内使用了重复的 id="list1"，虽不影响功能但不符合 HTML 规范，建议改为 class 或移除）。
- 执行时机：务必在 DOM 加载完成后调用初始化函数（如使用 DOMContentLoaded），否则 querySelector 可能返回 null。
- 扩展性：该 initCheckboxGroup 函数支持任意数量的分组，只需传入对应的 name 和 id 即可复用。
- 性能优化：对于大量复选框，可考虑防抖或使用事件委托，但常规权限列表（<100 项）无需额外优化。
通过以上方案，您将获得一个健壮、语义清晰且易于维护的双向复选框同步机制，彻底解决“取消任一子项后全选框状态不同步”的问题。
