Select All Check Boxes By group

August 4, 2022

first group : Agen LPG 3KG

second group : Office HRG

I want to select a checkbox based on the group, but at this time when I click on group one then group two should be selected when I click on group one then group one is checked, why is it selected only in the last loop?

my code in 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

Here is the javascript for this

<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>

how to solve my problem please help me.

>Solution :

You only have ONE input[id="{{$group}}" so it will only ever do that one.

Instead delegate (and remove onclick="toggle(this);") and use the data attributes you already have:

I assume the table has id="tableID" and you need to change the checkbox to 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>