如何按业务单元分组批量选中复选框-php教程-PHP中文网

如何按业务单元分组批量选中复选框

本文详解如何在 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"），便于事件绑定。

@foreach ($business_unit as $group => $unit) @foreach ($unit as $item) @endforeach @endforeach

Select All	Nama	Jabatan
{{ $group }} @if ($group == '') Unit Bisnis Lainnya @endif
	{{ $item->name }}	{{ $item->position ?? '-' }}

? 提示：使用 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() 处理，避免空格、斜杠等导致选择器失效。