如何按payroll_group_id实现复选框全选/反选功能

1. 修改Blade模板代码 #

先修复复选框重复ID的问题（DOM中ID必须唯一），并给每个员工复选框添加分组标识的data属性：

@foreach ($unit as $item)
    @if ($item->payroll_group_id == null || $item->payroll_group_id == $payroll_id)
        <tr class='employee-row'>
            <td>
                {{-- 移除重复的id="check"，添加data属性标记所属分组 --}}
                <input type="checkbox" class="emp-check" name="employee_id[]" value="{{ $item->employee_id }}" 
                       data-payroll-group="{{ $item->payroll_group_id }}">
                {{-- 可选保留hidden输入框，若其他逻辑需要使用 --}}
                <input type="hidden" class="py-sid" value="{{ $item->payroll_group_id }}">
            </td>
            <td class='captial'>{{ $item->name }}</td>
            <td class='captial'>{{ $item->position ?? '-' }}</td>
        </tr>
    @endif
@endforeach

2. 修改全选按钮与JavaScript逻辑 #

先定义对应分组的全选按钮（以当前页面的$payroll_id为例）：

<input type="checkbox" onclick="toggle(this, '{{ $payroll_id }}')"> 全选当前分组

然后更新toggle函数，实现按分组ID精准控制复选框：

<script>
function toggle(source, targetGroupId) {
    // 筛选目标分组的员工复选框
    let checkboxes = document.querySelectorAll(`input.emp-check[data-payroll-group="${targetGroupId}"]`);
    
    // 单独处理分组ID为null的情况
    if (targetGroupId === 'null') {
        checkboxes = document.querySelectorAll(`input.emp-check[data-payroll-group="null"]`);
    }
    
    // 批量切换选中状态
    checkboxes.forEach(checkbox => {
        if (checkbox !== source) {
            checkbox.checked = source.checked;
        }
    });
}
</script>

核心改动说明 #

• 移除重复的id="check"：重复ID会导致DOM选择器异常，违反HTML规范
• 用data-payroll-group属性绑定复选框与分组ID，实现分组标识
• 全选函数新增targetGroupId参数，精准定位目标分组的复选框
• 兼容payroll_group_id为null的场景，确保空分组的复选框也能被正确控制

内容的提问来源于stack exchange，提问作者Babo