primer grupo : Agen LPG 3KG
segundo grupo : Oficina HRG
Quiero seleccionar una casilla de verificación basada en el grupo, pero en este momento, cuando hago clic en el grupo uno, el grupo dos debe seleccionarse cuando hago clic en el grupo uno y luego el grupo uno está marcado, ¿por qué está seleccionado solo en el último bucle?
mi código en 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 @endforeachAquí está el javascript para esto
<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>como solucionar mi problema por favor ayudenme.
Solo tiene UNA input[id="{{$group}}" por lo que solo hará esa.
En su lugar, delegue (y elimine onclick="toggle(this);" ) y use los atributos de datos que ya tiene:
Supongo que la tabla tiene id="tableID" y debe cambiar la casilla de verificación a 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>