本文详解如何在 laravel blade 模板中实现按业务组（如“agen lpg 3kg”“office hrg”）独立控制复选框全选/取消，解决原代码中点击任一组均只影响最后一组的常见错误。
本文详解如何在 laravel blade 模板中实现按业务组（如“agen lpg 3kg”“office hrg”）独立控制复选框全选/取消，解决原代码中点击任一组均只影响最后一组的常见错误。
在构建多业务单元员工管理界面时，常需为每个业务组（如 Agen LPG 3KG、Office HRG）提供独立的「全选」复选框。但若直接使用 id="{{ $group }}" 绑定多个同名 ID 的 checkbox（HTML 中 ID 必须唯一），会导致 JavaScript 查询失效——document.querySelectorAll('input[id="{{$group}}"]') 实际仅匹配最后一个同名 ID 元素，造成逻辑错乱。
根本原因在于：HTML id 属性必须全局唯一，而原代码中所有同组员工 checkbox 均使用 id="{{$group}}"，违反规范，且 jQuery/原生 DOM 查询无法正确识别目标集合。
✅ 正确方案是改用 CSS 类名（class）标识组别，并采用 事件委托（Event Delegation） 统一处理，避免内联 onclick 和作用域污染问题。
✅ 推荐实现步骤
1. 修改 Blade 模板（index.blade.php）
- 移除
id="{{$group}}"，改为添加动态 class（如emp-check group-ageng-lpg-3kg）； - 删除内联
onclick="toggle(this)"，改用语义化data-business-id属性； - 确保表格有唯一容器 ID（如
id="business-unit-table"），便于事件绑定。
<table id="business-unit-table">
@foreach ($business_unit as $group => $unit)
<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="{{ $group }}"> 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 {{ \Illuminate\Support\Str::slug($group, '-') }}"
name="employee_id[]"
value="{{ $item->employee_id }}"
>
</td>
<td class="captial">{{ $item->name }}</td>
<td class="captial">{{ $item->position ?? '-' }}</td>
</tr>
@endforeach
@endforeach
</table>? 提示：使用
Str::slug()将组名（含空格/特殊字符）转为合法 CSS 类名，如Agen LPG 3KG→agen-lpg-3kg，确保选择器安全可靠。
2. 替换 JavaScript 为事件委托逻辑
将脚本置于模板底部或独立 JS 文件中（确保 DOM 已加载）：
<script>
document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('business-unit-table');
if (!table) return;
table.addEventListener('click', function(e) {
const tgt = e.target;
// 仅响应带有 data-business-id 的复选框（即各组“Select All”）
if (!tgt.matches('input[type="checkbox"][data-business-id]')) return;
const groupId = tgt.dataset.businessId;
const isChecked = tgt.checked;
// 查找当前组所有员工复选框（class 匹配）
const groupCheckboxes = table.querySelectorAll(`input.emp-check.${groupId}`);
groupCheckboxes.forEach(chk => chk.checked = isChecked);
});
});
</script>⚠️ 关键注意事项
- ❌ 禁止重复 ID：HTML 规范严禁多个元素共用同一
id，否则getElementById或querySelectorAll('[id=...]')行为不可预测。 - ✅ *优先使用 class + data- 属性**：语义清晰、可扩展性强，且天然支持 CSS 选择器与 JS 查询。
- ? 事件委托优势：无需为每个“Select All”单独绑定事件，动态新增行也自动生效。
- ? 类名规范化：对
$group使用Str::slug()处理，避免空格、斜杠等导致选择器失效。
✅ 效果验证
- 点击
Agen LPG 3KG行的「Select All」→ 仅该组员工 checkbox 被勾选； - 点击
Office HRG行的「Select All」→ 仅该组响应，互不干扰； - 支持后续通过 JS 动态追加新业务组，无需修改事件逻辑。
此方案兼顾可维护性、标准合规性与前端性能，是 Laravel + Blade 场景下多级复选框控制的最佳实践。
