本文介绍如何使用原生 javascript 实现 accordion 中每组子复选框与顶部“全选”复选框的双向联动：点击全选框可批量操作，勾选/取消任意子项时自动更新全选框状态。
在权限管理类表单中，常需为多个功能模块（如 Projects、Project Category、Project Type）分别提供“全选”控制能力。理想行为应满足两个核心逻辑：
- ✅ 正向控制：点击“全选”复选框 → 所有同组子复选框同步勾选或取消；
- ✅ 反向同步：任意一个子复选框状态变更 → 自动检测整组是否全部选中，从而动态更新“全选”框的 checked 状态。
你当前的代码仅实现了正向控制（onclick="toggleProjects(this)"），但缺少对子项变更的监听，因此无法响应“手动取消某一项”后全选框仍保持勾选的问题。
✅ 推荐方案：原生 JavaScript（无 jQuery 依赖）
以下为清晰、可复用、符合语义的实现方式（适配你的 Bootstrap Accordion 结构）：
<!-- 示例：Projects 分组（其他分组结构同理） -->
<h2 class="accordion-header">
<button class="accordion-button collapsed gap-3" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
<input class="form-check-input" type="checkbox" value="" id="selectAllList1" />
Projects
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="projects" value="add" />
<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" name="projects" value="view" />
<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" name="projects" value="edit" />
<label class="form-check-label">Edit Project</label>
</div>
</li>
</ul>
</div>// 封装为可复用函数，避免重复代码
function setupSelectAll(groupName, toggleId) {
const toggler = document.getElementById(toggleId);
const checkboxes = document.querySelectorAll(`input[name="${groupName}"]`);
// 【反向同步】监听每个子项变化，更新全选框状态
checkboxes.forEach(box => {
box.addEventListener('change', () => {
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
toggler.checked = allChecked;
// 可选：当全部未选时，也清除 indeterminate 状态（见下方说明）
if (!allChecked && !Array.from(checkboxes).some(cb => cb.checked)) {
toggler.indeterminate = false;
}
});
});
// 【正向控制】点击全选框，同步所有子项
toggler.addEventListener('change', () => {
checkboxes.forEach(cb => (cb.checked = toggler.checked));
});
}
// 初始化各分组（按需调用）
setupSelectAll('projects', 'selectAllList1');
setupSelectAll('projectCategory', 'selectAllList2');
setupSelectAll('projectType', 'selectAllList3');? 关键说明与增强建议
-
indeterminate 状态（进阶体验）：
当部分子项被选中时，“全选框”应显示为半选（—）状态，提升用户感知。可在 change 回调中添加：const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length; toggler.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
避免 ID 冲突：你原始代码中多个 <label for="list1"> 共享相同 id="list1"，违反 HTML 唯一性规范，务必为每个复选框设置唯一 id（如 id="project-add"、id="category-view"）。
性能与兼容性：上述代码使用 addEventListener 替代内联 onclick，更易维护且支持现代浏览器（包括 IE11+）。若需兼容更老版本，可改用 attachEvent 回退方案。
-
jQuery 版本（如必须使用）：
function setupSelectAllJQ(groupName, toggleId) { const $toggler = $(`#${toggleId}`); const $boxes = $(`input[name="${groupName}"]`); $boxes.on('change', () => { const allChecked = $boxes.filter(':checked').length === $boxes.length; $toggler.prop('checked', allChecked).prop('indeterminate', $boxes.filter(':checked').length > 0 && !allChecked ); }); $toggler.on('change', () => { $boxes.prop('checked', $toggler.is(':checked')); }); }
✅ 总结
真正健壮的“全选/反选”逻辑必须是双向绑定：既要响应全选框操作，也要监听子项变更并反馈状态。通过 change 事件 + Array.from().every() 检测 + addEventListener 解耦，即可实现高内聚、低耦合的权限控制组件。建议移除所有内联 JS（如 onclick），统一交由初始化脚本管理，便于后续扩展与测试。
