按组批量勾选复选框异常问题排查与解决请求

问题场景 #

现有两个业务组：Agen LPG 3KG、Office HRG，期望点击组的“全选”复选框时，仅选中当前组内的员工复选框，但实际操作时仅最后一组的全选功能生效。

问题原因分析 #

1. DOM元素ID重复：员工复选框使用id="{{$group}}"，同一组的所有员工复选框ID完全相同，而HTML中ID必须唯一，导致选择器只能匹配到最后一组的元素。
2. 模板变量作用域错误：JavaScript函数中的{{$group}}是Blade模板变量，循环结束后会被替换为最后一个循环的$group值，所有全选按钮都会错误操作最后一组的复选框。
3. this指向错误：函数中使用$(this)获取组ID，但toggle(this)已经把当前复选框作为参数传入，此时this并非触发事件的元素，导致无法正确获取当前组ID。

修复代码 #

修改后的Blade模板代码 #

@foreach ($business_unit as $group => $unit)
      <tr>
          <td colspan='5' style='font-weight: bold'>{{ $group ?: 'Unit Bisnis Lainnya' }}</td>
      </tr>
      <tr class="unit_bisnis">
           <th style="width: 130px"> 
               <input type="checkbox" data-business-id="{{$group}}" onclick="toggle(this);"> 
               &nbsp;Select All
           </th>
           <th>Nama</th>
           <th>Jabatan</th>
      </tr>

     @foreach ($unit as $item)
                <tr class='employee-row'>
                     <td>
                         <!-- 用员工ID作为唯一ID，添加data-group标记所属组 -->
                         <input type="checkbox" class="emp-check" 
                                data-group="{{$group}}" 
                                id="emp-{{$item->employee_id}}" 
                                name="employee_id[]" 
                                value="{{ $item->employee_id }}">
                     </td>
                     <td class='captial'>{{ $item->name }}</td>
                     <td class='captial'>{{ $item->position ?? '-' }}</td>
                 </tr>
     @endforeach
 @endforeach

修改后的JavaScript代码 #

<script>
    function toggle(source) {
        // 从触发事件的全选按钮获取当前组ID
        const businessId = source.dataset.businessId;
        // 选择当前组下的所有员工复选框
        const checkboxes = document.querySelectorAll(`input[data-group="${businessId}"]`);

        // 批量设置选中状态
        checkboxes.forEach(checkbox => {
            checkbox.checked = source.checked;
        });
    }
</script>

修复要点总结 #

• 确保DOM元素ID唯一：用员工ID作为复选框的ID，避免同一组内ID重复。
• 用data-*属性关联组与员工：通过data-business-id（全选按钮）和data-group（员工复选框）建立关联，实现精准选择。
• 正确使用事件源参数：直接使用传入的source参数获取当前按钮的属性，避免this指向错误。
• 使用forEach简化循环：替代传统for循环，代码更简洁易读。

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