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);"> 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.
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"> 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"> 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>