Stack Overflow en español Asked by Reynaldo Cuenca Campos on December 11, 2021
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);
});
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)
Answered by Triby on December 11, 2021
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>Answered by xelfury on December 11, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP