0

Me sucede que tengo una lista de elementos seleccionables por checkbox y un checkbox que los selecciona a todos, hasta ahora pensé que funcionaba bien pues la primera vez que marco y desmarco funciona bien pero si repito la acción de marcar no se ponen los checkbox como seleccionados, aunque inspeccionado los elementos del dom veo que al marcar, si se le pone la propiedad checked a true a cada checkbox de la lista pero no se muestra como checked en el navgador, osea es como si no se enterara de que esta marcado.

este el codigo html

<span>
   <label><input id="check_all_calles" type="checkbox"> Marcar todas las </label>
</span>

<div class="lista_calles">
    <span>
        <label for="id_calles_0">
            <input type="checkbox" name="calles" value="5" class="form-control" id="id_calles_0">
            <span> 10</span>
        </label>
    </span>
    <span>
        <label for="id_calles_1">
            <input type="checkbox" name="calles" value="6" class="form-control" id="id_calles_1">
            <span> 11</span>
        </label>
    </span>
</div>

y este el código js para que funcione

$("#check_all_calles").on("click", function(){
    $("input[name='calles']").attr('checked', this.checked);
});

2 respuestas 2

1

Simplemente usa la funcion prop() de jquery. Ejecuta el fragmento de abajo para ver como funciona.

$(document).ready(function() {
   $("#check_all_calles").click(function() {
      $('input:checkbox').not(this).prop('checked', this.checked);
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
   <label><input id="check_all_calles" type="checkbox"> Marcar todas las </label>
</span>
<div class="lista_calles">
   <span>
      <label for="id_calles_0">
         <input type="checkbox" name="calles" value="5" class="form-control" id="id_calles_0">
         <span> 10</span>
      </label>
   </span>
   <span>
      <label for="id_calles_1">
         <input type="checkbox" name="calles" value="6" class="form-control" id="id_calles_1">
         <span> 11</span>
      </label>
   </span>
</div>

2
  • ¿Prop no estaba depreciado ya? el 23 jul. 2020 a las 14:23
  • muchas gracias perfecto con esta solucion se logra el funcionamiento que esperaba el 25 jul. 2020 a las 2:07
0

El problema no está, propiamente, en javascript, sino en el HTML, porque tienes más de un campo con el mismo nombre; recuerda que los checkboxes se procesan solo cuando están marcados (a menos que lo hagas por javascript) y, como comparten nombre, solo se va a enviar uno, sin importar cuántos marques.

Agrega corchetes al nombre name="calles[]" para poder acceder a todos desde javascript y se puedan enviar al procesar el formulario.

$("#check_all_calles").on("click", function(){
    let chk = this.checked;
    $("input[name^='calles']").each(function(index, item) {
        item.checked = chk;
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>
   <label><input id="check_all_calles" type="checkbox"> Marcar todas las </label>
</span>

<div class="lista_calles">
    <span>
        <label for="id_calles_0">
            <input type="checkbox" name="calles[]" value="5" class="form-control" id="id_calles_0">
            <span> 10</span>
        </label>
    </span>
    <span>
        <label for="id_calles_1">
            <input type="checkbox" name="calles[]" value="6" class="form-control" id="id_calles_1">
            <span> 11</span>
        </label>
    </span>
</div>

Si marcas ambos checkboxes en el servidor los vas a recibir como arreglo; suponiendo que usas PHP y el formulario se envió con método POST:

$checks = (isset($_POST['calles']) ? $_POST['calles'] : [];
var_dump($checks); // Resultado: Array (5, 6)
3
  • Gracias por la respuesta amigo pero el problemilla que le vi es que cuando hay un checkbox marcado parece que se ignora el mismo a la hora des del desmarcar todos por ejemplo si le doy marcar todos y luego desmarcar todos solo se desmarcan los que estaban desmarcados. gracias por la atencion el 25 jul. 2020 a las 2:09
  • Listo, ya está corregido.
    – Triby
    el 25 jul. 2020 a las 2:25
  • Yep tambien funciona como se espera, muchas gracias. el 26 jul. 2020 a las 3:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.