¿Cómo activar y desactivar checkboxes con otro checkbox a una columna entera de una tabla con jQuery?

publicado por: Anonymous

Como se ve en la CAPTURA quiero activar y desactivar toda una columna que tiene checkboxs al presionar el checkbox de la parte superior que dice UBIGEO.

Ejemplo de muestra de ACTIVACION DE CHECK

Con jQuery, este ejemplo viene por defecto en el admin de django.

¿Cómo lo podría hacer?


Lo he avanzado así:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJEMPLO DE CHECKBOX</title>
</head>
<body>
    <form action="">
        <label for=""><b>CHECK A TODOS</b></label>
        Valor<input type="checkbox" id="checkb" name="check"><br>
         Valor<input type="checkbox" name="check" id="checkbox" class="checar"> <br>
         Valor<input type="checkbox" name="check" id="checkbox" class="checar"><br>
        Valor<input type="checkbox" name="check" id="checkbox" class="checar"><br>
         Valor<input type="checkbox" name="check" id="checkbox" class="checar"><br>


    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <script>

            $('#checkb').click(function() {
                $('.checar').each(function(){
                    /*$("#checkbox").click();*/
                    $(this).click();
                })

              });
        </script>
</body>
</html>

solución

Podes usar el método prop tanto para obtener el valor de una propiedad como para establecer el valor a una propiedad para el conjunto de elementos seleccionados.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>EJEMPLO DE CHECKBOX</title>
</head>

<body>
    <form action="">
        <label for=""><b>CHECK A TODOS</b></label> Valor
        <input type="checkbox" id="checkb" name="check"><br> Valor
        <input type="checkbox" name="check" id="checkbox" class="checar"> <br> Valor
        <input type="checkbox" name="check" id="checkbox" class="checar"><br> Valor
        <input type="checkbox" name="check" id="checkbox" class="checar"><br> Valor
        <input type="checkbox" name="check" id="checkbox" class="checar"><br>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        // Si se hace click sobre el input de tipo checkbox con id checkb
        $('#checkb').click(function() {
            // Si esta seleccionado (si la propiedad checked es igual a true)
            if ($(this).prop('checked')) {
                // Selecciona cada input que tenga la clase .checar
                $('.checar').prop('checked', true);
            } else {
                // Deselecciona cada input que tenga la clase .checar
                $('.checar').prop('checked', false);
            }
        });
    </script>
</body>

</html>

Documentación de prop (inglés)


¿Por qué con este código no funciona?

$('#checkb').click(function() {
    // No es necesario recorrer cada input con el método each, lo recomendable es utilizar 
    // el selector de clase y modificar el atributo checked directamente a todos los input
    // mediante algún método diseñado para ello (como prop)
    $('.checar').each(function(){
        // Si un input esta seleccionado, al hacer click lo deselecciona y viceversa.
        $(this).click();
    })
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *