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.

• Para acceder al formulario se parte del objeto "document" y se accede al formulario por medio de su nombre, definido en el atributo "name", en este caso document.f1.
• Para hacer un recorrido por todos los campos del formulario se utiliza el array elements, que guarda una referencia con cada elemento que haya dentro del formulario.
• En el recorrido comprueba si el elemento actual es de tipo "checkbox" (recordar que el array elements contiene todos los elementos, pero sólo deseamos operar con los que sean checkbox) y en ese caso, simplemente se actualiza el atributo "checked" al valor true, con lo que el chekbox se marcará.

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```.

• Para acceder al formulario se parte del identificador del formuario, llamado "formElement".
• Usamos querySelectorAll() que es un método del objeto document que recibe un selector de CSS. Este método devuelve todos los elementos de la página que concuerdan con el selector proporcionado.
• El selector que hemos usado es '#formElement input[type=checkbox]' Este selector parte del formulario cuyo indentificador es #formElement y dentro de ese formulario busca elementos input cuyo atributo type es checkbox.
• El array de elementos que nos proporciona querySelectorAll lo recorremos con el método forEach de los arrays.
• Para cada elemento checkbox se activa finalmente su propiedad checked.

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>