He examinado varias sugerencias de SO usando JQuery. Hasta ahora nada me funciona. Tengo una página llena de casillas de verificación intercambiables en un archivo de Laravel Blade. La entrada de la hoja está rodeada por una declaración foreach, lo que produce varias casillas de verificación de cambio en la página. Aquí está la entrada en el archivo blade:

<div class="custom-control custom-switch">
    <input type="hidden" value="0" name="children[{{$child->child_id}}]">
    <input type="checkbox" class="custom-control-input" id="children[{{$child->child_id}}]" name="children[{{$child->child_id}}]" {{ $child->status ? 'checked' : '' }} value="1">
    <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>

De los más de seis intentos, aquí está el último que hice. Puedo seleccionar las casillas de verificación, pero no puedo identificar y aislar cada identificación de niño específica.

$("input:checkbox").click(function () {
        var names = [];
        $('input:checked').each(function() {
            names.push(this.name);
        });
     });

El objetivo es recoger todos aquellos interruptores que se han apagado y encendido. Luego, ajax los enviará a un controlador para actualizarlos individualmente o colectivamente. ¿Alguien puede ayudar? Muchas gracias.

2
Vince 22 ene. 2021 a las 06:46

1 respuesta

La mejor respuesta

En lugar del bucle each, simplemente puede marcar la casilla de verificación que cambia es checked si es así, envíela a su página de backend.

Código de demostración :

$("input:checkbox").click(function() {
//if checked...
  if (this.checked) {
    var value = this.name.split('children')[1];
    console.log(value)
    //your ajax call here
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children[{{$child->child_id}}]" name="children1" value="1">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children2" name="children2" value="2">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
<div class="custom-control custom-switch">
  <input type="hidden" value="0" name="children[{{$child->child_id}}]">
  <input type="checkbox" class="custom-control-input" id="children3" name="children3" value="3">
  <label class="custom-control-label" for="children[{{$child->child_id}}]">Absent / Present</label>
</div>
1
Swati 22 ene. 2021 a las 04:54