Marcar o desmarcar todos los checkbox de un formulario con Javascript

El ejercicio que vamos a relatar en este artículo es bastante típico de trabajo con formularios en Javascript. Se trata de hacer un enlace 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 deseleccionar todos los campos checkbox del formulario de una sola vez.

El ejercicio es simple de entender, pero podemos verlo en funcionamiento en una página aparte para hacernos una idea exacta de nuestras intenciones.

El formulario HTML

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">
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>
//Otro campo de formulario:
<select name=otro>
<option value="1">Seleccion 1
<option value="2">Seleccion 2
</select>
<br>
<input type="submit">
<br>
<br>
<a href="javascript:seleccionar_todo()">Marcar todos</a> |
<a href="javascript:deseleccionar_todo()">Marcar ninguno</a>
</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.

Funciones de Javascript

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

La función seleccionar_todo() realiza un recorrido por todos los elementos del formulario. Para hacer un recorrido por todos los campos 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 1, con lo que el chekbox se marcará.

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

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.

El ejemplo no tiene más misterio. Se puede ver en marcha en una página aparte.