本文介绍如何使用原生 javascript 实现多组独立复选框的双向联动：点击“全选”可批量操作子项，任一子项状态变化时自动更新“全选”勾选状态。
在实际开发中（如权限管理面板），常需为每组功能（如 Projects、Project Category、Project Type）提供一个“全选”复选框，并确保其与下属所有复选框保持状态同步：
- ✅ 点击“全选” → 所有子项被勾选/取消；
- ✅ 任一子项手动勾选/取消 → “全选”自动反映当前整体状态（全勾选时为 true，否则为 false）。
原问题中的代码仅实现了单向控制（onclick="toggleProjects(this)" 只处理“全选→子项”，未监听子项变更），导致“取消某一项后，全选框仍保持勾选”的逻辑缺陷。正确方案需双向绑定：既响应“全选框”变化，也监听所有子项的 change 事件。
以下是基于原 HTML 结构优化后的完整解决方案（推荐使用原生 JS，无需 jQuery，兼容性好且更轻量）：
✅ 步骤一：统一结构语义化（关键前提）
为便于 JS 精准定位，建议为每个分组添加语义化 data-group 属性，并将“全选”复选框移出 <button> 内部（避免干扰 Bootstrap Accordion 的默认行为），同时修正重复 ID（如 id="list1" 多次出现）：
<!-- 示例：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 me-2" type="checkbox" value=""
id="selectAllList1" data-group="projects" />
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>
<!-- 其他子项... -->
</ul>
</div>
</div>✅ 步骤二：核心 JavaScript（支持多组，无重复逻辑）
// 初始化所有分组的双向联动
document.addEventListener('DOMContentLoaded', () => {
// 遍历每个“全选”复选框
document.querySelectorAll('input[type="checkbox"][data-group]').forEach(toggler => {
const groupName = toggler.dataset.group;
const checkboxes = document.querySelectorAll(`input[type="checkbox"][name="${groupName}"]`);
// 【1】监听“全选框”变化 → 同步所有子项
toggler.addEventListener('change', () => {
checkboxes.forEach(cb => cb.checked = toggler.checked);
});
// 【2】监听所有子项变化 → 自动更新“全选框”状态
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', () => {
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
toggler.checked = allChecked;
});
});
});
});✅ 关键说明与注意事项
- 避免内联 JS：删除 HTML 中 onclick="toggleProjects(this)"，改用 addEventListener，更易维护且符合现代实践；
- ID 唯一性：HTML 中多个 <input id="list1"> 违反规范，应改为唯一 ID 或直接使用 name 属性筛选（如上例）；
- 性能优化：Array.from(checkboxes).every(...) 在子项较少时无压力；若数量极大（>100），可缓存已勾选项数量，避免每次遍历；
- Bootstrap 兼容性：本方案不干扰 Accordion 折叠逻辑，仅增强复选框行为；
- 扩展性：新增分组只需添加 data-group="xxx" 和对应 name="xxx" 即可自动生效，无需修改 JS。
✅ 最终效果验证
- ✅ 点击 Projects 全选框 → 所有 name="projects" 子项同步勾选/取消；
- ✅ 手动取消任一 Projects 子项 → Projects 全选框自动取消；
- ✅ 三个分组（Projects / Project Category / Project Type）完全独立、互不干扰。
此方案简洁、健壮、可扩展，是表单权限管理场景下的推荐实践。
