本文详解如何在 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"），便于事件委托绑定。
<table id="business-unit-table">
@foreach ($business_unit as $group => $unit)
@php
// 安全转换组名为 CSS class 兼容格式（如 "Agen LPG 3KG" → "agen-lpg-3kg"）
$groupClass = strtolower(str_replace([' ', '/'], '-', trim($group)));
@endphp
<tr>
<td colspan="5" style="font-weight: bold">
{{ $group }} @if ($group == '') Unit Bisnis Lainnya @endif
</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px">
<input type="checkbox" data-business-id="{{ $groupClass }}"> Select All
</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
@foreach ($unit as $item)
<tr class="employee-row">
<td>
<input type="checkbox"
class="emp-check {{ $groupClass }}"
name="employee_id[]"
value="{{ $item->employee_id }}">
</td>
<td class="captial">{{ $item->name }}</td>
<td class="captial">{{ $item->position ?? '-' }}</td>
</tr>
@endforeach
@endforeach
</table>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 渲染场景，是多组批量操作的推荐实践。
