> Manuales > Formularios y Javascript

Realizamos función de Javascript para que se puedan seleccionar todos los checkbox o cajas de selección de un formulario a la vez, pulsando un solo enlace. Hacemos también la función para deseleccionar todos los elementos a la vez.

Marcar o desmarcar todos los checkbox de un formulario con Javascript

El ejercicio que vamos a realizar en este artículo es bastante típico de trabajo con formularios en Javascript. Se trata de hacer un enlace o un botón para que se puedan marcar todos los campos checkbox que haya en un formulario de una sola vez, es decir, sin tener que pulsarlos uno a uno para marcarlos todos. También haremos la función que permita desmarcar todos los campos checkbox del formulario de una sola vez.

El ejercicio es simple de entender, y habremos visto cosas similares en multitud de páginas y sitios web. Lo vamos a realizar con un Javascript muy sencillo, usando diversas aproximaciones.

El formulario HTML con sus checkbox

Tenemos un formulario creado con HTML que es donde estarán los checkboxes que hay que marcar y desmarcar automáticamente. El formulario es muy sencillo. Lo vemos a continuación.

<form name="f1" id="formElement">
    <p>
        Nombre: <input type="text" name="nombre" />
        <br>
        <input type="checkbox" name="ch1" /> Opcion 1
        <br>
        <input type="checkbox" name="ch2" /> Opcion 2
        <br>
        <input type="checkbox" name="ch3" /> Opcion 3
        <br>
        <input type="checkbox" name="ch4" /> Opcion 4
        <br>
        <select name="otro">
            <option value="1">Seleccion 1</option>
            <option value="2">Seleccion 2</option>
        </select>
        <br>
        <input type="submit" value="Enviar" />
    </p>
    <p>
        <a href="#" id="marcarTodo">Marcar todos los checkbox</a> |
        <a href="#" id="desmarcarTodo">Desmarcar todos los checkbox</a>
    </p>
</form>

Lo único que debemos fijarnos es que hemos colocado diversos tipos de elementos en el formulario. En realidad sólo vamos a trabajar con el estado de los checkbox, pero hemos incluido otros elementos porque lo habitual en un formulario es que hayan elementos de varios tipos.

Al final del formulario tenemos un par de enlaces para marcar o desmarcar todos los checkboxes de una sola vez. Estos enlaces llaman a un par de funciones Javascript que veremos ahora. Por supuesto, podrías usar botones o cualquier otro elemento en lugar de enlaces.

Marcar todos los elementos checkbox con Javascript

Vamos a ver ahora unas funciones Javascript que nos permitirán marcar todos los elementos checkbox que hay en un formulario. Lo veremos con dos aproximaciones distintas, usando un código de Javascript más tradicional y otro código un poco más moderno.

function seleccionarTodo() {
    for (let i=0; i < document.f1.elements.length; i++) {
        if(document.f1.elements[i].type === "checkbox") {
            document.f1.elements[i].checked = true;
        }
    }
}

Este primer ejemplo es un poco más tradicional. Usa un simple bucle for y recorre todos los elementos del formulario, tanto los checkbox como los otros elementos.

Ahora vamos a ver otra alternativa perfectamente válida de código Javascript para hacer lo mismo, pero utilizando características un poco más modernas del lenguaje.

function checkAll() {
    document.querySelectorAll('#formElement input[type=checkbox]').forEach(function(checkElement) {
        checkElement.checked = true;
    });
}

El enfoque que hemos usado en esta ocasión es un poco distinto, quedando un código un poco más compacto. En este caso no hemos accedido a todos los campos de formulario, sino que hemos recorrido únicamente los que son verdaderamente checkboxes, por eso nos hemos ahorrado el ```if```. Además, gracias a ```forEach``` nos ahorramos definir el ```for```.

Función para desmarcar todos los chekbox

Ahora vamos a ver las funciones que realizan la operación contraria, en este caso desmarcar o desactivar los chekboxes del formulario. Los enfoques en ambas funciones son idénticos a los que hemos usado en los ejemplos anteriores.

Con un Javascript más tradicional podríamos hacer algo así.

function desmarcarTodo() {
    for (let i=0; i<document.f1.elements.length; i++) {
        if(document.f1.elements[i].type == "checkbox") {
            document.f1.elements[i].checked = false
        }
    }
}

La función deseleccionar_todo() es casi igual que la anterior. Realiza un recorrido a todos los elementos y en el caso que sean checkbox, se fija a cero el atributo "checked" para que la caja de selección se quede desmarcada.

Ahora veamos una alternativa con el Javascript más actual.

function uncheckAll() {
    document.querySelectorAll('#formElement input[type=checkbox]').forEach(function(checkElement) {
        checkElement.checked = false;
    });
}

Volvemos a hacer uso de ```querySelectorAll```, lo que nos resulta especialmente cómodo para seleccionar los elementos que son verdaderamente checkboxes.

Conclusión

El ejemplo no tiene más misterio. Hemos visto cómo poder hacer este recorrido a los elementos del formulario, detectando cuáles de ellos son checkbox, para marcarlos o desmarcarlos convenientemente. Luego hemos visto una contrapartida que usa funciones más modernas de Javascript para la selección avanzada de los elementos y su recorrido con un bucle ```forEach```, que también es perfectamente válido.

Ambas funciones son igualmente válidas. Para que el ejemplo se ejecute bien te tienes que fijar en que el formulario tenga el "name" o el "id" específico que hemos usado para acceder a él. Por si existise alguna duda, vamos a dejar a continuación el código completo de este ejemplo.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Marcar y desmarcar todos los checkbox de formulario con un botón</title>
    </head>
    <body>
        
    <form name="f1" id="formElement">
        <p>
            Nombre: <input type="text" name="nombre" />
            <br>
            <input type="checkbox" name="ch1" /> Opcion 1
            <br>
            <input type="checkbox" name="ch2" /> Opcion 2
            <br>
            <input type="checkbox" name="ch3" /> Opcion 3
            <br>
            <input type="checkbox" name="ch4" /> Opcion 4
            <br>
            <select name="otro">
                <option value="1">Seleccion 1</option>
                <option value="2">Seleccion 2</option>
            </select>
            <br>
            <input type="submit" value="Enviar" />
        </p>
        <p>
            <a href="#" id="marcarTodo">Marcar todos los checkbox</a> |
            <a href="#" id="desmarcarTodo">Desmarcar todos los checkbox</a>
        </p>
    </form>
    
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById('marcarTodo').addEventListener('click', function(e) {
                e.preventDefault();
                //seleccionarTodo();
                checkAll();
            });
            document.getElementById('desmarcarTodo').addEventListener('click', function(e) {
                e.preventDefault();
                //desmarcarTodo();
                uncheckAll();
            });
        });
    
        function seleccionarTodo() {
            for (let i=0; i < document.f1.elements.length; i++) {
                if(document.f1.elements[i].type === "checkbox") {
                    document.f1.elements[i].checked = true;
                }
            }
        }
    
        function desmarcarTodo() {
            for (let i=0; i<document.f1.elements.length; i++) {
                if(document.f1.elements[i].type == "checkbox") {
                    document.f1.elements[i].checked = false
                }
            }
        }
    
        function checkAll() {
            document.querySelectorAll('#formElement input[type=checkbox]').forEach(function(checkElement) {
                checkElement.checked = true;
            });
        }
    
        function uncheckAll() {
            document.querySelectorAll('#formElement input[type=checkbox]').forEach(function(checkElement) {
                checkElement.checked = false;
            });
        }
    </script>
    </body>
    </html>
    

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual