本文详解如何在 laravel blade 表格中，为不同业务组（如“agen lpg 3kg”“office hrg”）独立实现“全选/取消全选”功能，解决因 id 冲突导致的仅最后一组生效问题，并提供可直接落地的 html + javascript 方案。
本文详解如何在 laravel blade 表格中，为不同业务组（如“agen lpg 3kg”“office hrg”）独立实现“全选/取消全选”功能，解决因 id 冲突导致的仅最后一组生效问题，并提供可直接落地的 html + javascript 方案。
在构建多组员工列表时，常见需求是：点击某组顶部的「Select All」复选框，仅该组内所有员工复选框同步勾选/取消；但原代码中使用 id="{{ $group }}" 导致所有同组员工复选框 ID 重复（HTML 规范禁止 ID 重复），且 JavaScript 中 document.querySelectorAll('input[id="{{$group}}"]') 实际只匹配到最后一个同名 ID 元素（浏览器行为），因此逻辑失效。
正确解法是放弃 id 绑定，改用语义化 class + data 属性 + 事件委托，确保每组控制逻辑完全隔离。
✅ 正确实现步骤
1. 修改 Blade 模板（index.blade.php）
- 移除
onclick="toggle(this)"，避免内联 JS； - 将员工复选框的
id="{{ $group }}"替换为class="emp-check {{ $group }}"（如class="emp-check agen-lpg-3kg"）； - 为「Select All」复选框保留
data-business-id属性，值为当前组标识（建议转为 kebab-case 避免空格问题）； - 为整个表格添加唯一 ID（如
id="business-unit-table"），便于事件委托绑定。
| {{ $group }} @if ($group == '') Unit Bisnis Lainnya @endif | ||||
| Select All | Nama | Jabatan | ||
|---|---|---|---|---|
| {{ $item->name }} | {{ $item->position ?? '-' }} | |||
2. 注册事件委托脚本（推荐放在 @push('scripts') 或页面底部）
使用 addEventListener 监听表格点击事件，仅当点击目标是带 data-business-id 的复选框时触发逻辑：
<script>
document.getElementById("business-unit-table").addEventListener("click", function(e) {
const tgt = e.target;
// 仅处理「Select All」复选框（带 data-business-id 属性）
if (!tgt.matches("input[type='checkbox'][data-business-id]")) return;
const groupId = tgt.dataset.businessId; // 如 "agen-lpg-3kg"
const isChecked = tgt.checked;
// 查找当前组所有员工复选框并同步状态
document.querySelectorAll(`input.emp-check.${groupId}`).forEach(checkbox => {
checkbox.checked = isChecked;
});
});
</script>
⚠️ 关键注意事项
-
禁止复用
id：HTML 中id必须全局唯一，重复 ID 会导致getElementById和querySelectorAll行为不可靠。 -
类名需合法：若
$group含空格、斜杠等（如"Agen LPG 3KG"），必须转换为合法 CSS class（如agen-lpg-3kg），否则选择器失效。 - 事件委托更健壮：动态添加行时无需重新绑定事件，天然支持后续 DOM 变更。
- 无障碍友好：保留语义化结构，屏幕阅读器可正常识别分组关系。
✅ 效果验证
- 点击「Agen LPG 3KG」组的 Select All → 仅该组员工复选框响应；
- 点击「Office HRG」组的 Select All → 仅该组响应，互不干扰；
- 勾选/取消任意组全选框，其下属员工状态实时同步。
此方案轻量、可维护性强，完美适配 Laravel Blade 渲染场景，是多组批量操作的推荐实践。
