Select 所有复选框按组

Question

第一组：阿让LPG 3KG

第二组：办公室HRG

我想 select 基于组的复选框，但是此时当我点击组一时应该选择组二当我点击组一然后组一被选中时，为什么它只在最后一个循环中被选中？

我在 index.blade.php 中的代码

 @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}}" onclick="toggle(this);"> &nbsp;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" id="{{$group}}" name="employee_id[]" value="{{ $item->employee_id }}">                             
                     <td class='captial'>{{ $item->name }}</td>
                     <td class='captial'>{{ $item->position ?? '-' }}</td>
                 </tr>
     @endforeach
 @endforeach

这是为此的 javascript

<script>
    function toggle(source) {
        var business_id = $(this).data('business-id');
        var checkboxes = document.querySelectorAll('input[id="{{$group}}"]');

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i] != source)
                checkboxes[i].checked = source.checked;
        }
    }
</script>

如何解决我的问题请帮助我。

Answer 1

你只有一个input[id="{{$group}}"所以它只会做那个。

而是委托（并删除onclick="toggle(this);" ）并使用您已有的数据属性：

我假设该表具有 id="tableID" 并且您需要将复选框更改为class="emp-check {{$group}}"

 document.getElementById("tableID").addEventListener("click", function(e) { const tgt = e.target; if (.tgt.matches("[data-business-id]")) return // or use a class const business_id = tgt.dataset;businessId. // the business-id becomes businessId const checked = tgt;checked. document.querySelectorAll(`input.${business_id}`).forEach(chk => chk.checked = checked) })

 <table id="tableID"> <tr> <td colspan='5' style='font-weight: bold'>group 1</td> </tr> <tr class="unit_bisnis"> <th style="width: 130px"> <input type="checkbox" data-business-id="group1"> &nbsp;Select All</th> <th>Nama</th> <th>Jabatan</th> </tr> <tr class='employee-row'> <td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 1"> <td class='captial'>G1 Name 1</td> <td class='captial'>Whatever</td> </tr> <tr class='employee-row'> <td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 2"> <td class='captial'>G1 Name 2</td> <td class='captial'>Whatever</td> </tr> <tr class='employee-row'> <td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 3"> <td class='captial'>G1 Name 3</td> <td class='captial'>Whatever</td> </tr> <tr> <td colspan='5' style='font-weight: bold'>group 2</td> </tr> <tr class="unit_bisnis"> <th style="width: 130px"> <input type="checkbox" data-business-id="group2"> &nbsp;Select All</th> <th>Nama</th> <th>Jabatan</th> </tr> <tr class='employee-row'> <td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 1"> <td class='captial'>G2 Name 1</td> <td class='captial'>Whatever</td> </tr> <tr class='employee-row'> <td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 2"> <td class='captial'>G2 Name 2</td> <td class='captial'>Whatever</td> </tr> <tr class='employee-row'> <td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 3"> <td class='captial'>G2 Name 3</td> <td class='captial'>Whatever</td> </tr> </table>

Answer 2

根据此声明：（复选框[i]，=来源）。 你 select 只有那些不等于源的复选框。 所以这与您的要求相反。

请试试这个检查：（checkboxes[i] == source）