Marcar o desmarcar todos los checkbox de un formulario con Javascript

  • Por
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.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Sesan

21/12/2005
Al ser tan parecidas las 2 funciones javascript se podria unificar en una sola pasandole el parametro 1 ó 0 para activar o desactivar, por ejemplo:

Las llamadas a la función podría ser:

<a href="javascript:seleccionar_checkbox(1)">Marcar todos</a> |
<a href="javascript:seleccionar_checkbox(0)">Marcar ninguno</a>

Y la función sería esta:

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

No lo he probado, pero por su sencillez creo que funcionaría perfectamente.

Saludos.

Fco Díaz

21/12/2005
ES verdad la funcion se puede unificar como lo mencina sesan pero tambien podemos hacerla un poco mas dinamica, agregando la variable del formulario al que se va arealizar las acciones
esta es la funcion que uso en mis proyectos

function selydestodos(form,activa)
{
for(i=0;i<form.elements.length;i++)
if(form.elements[i].type=="checkbox")
form.elements[i].checked=activa;
}

es casi igual al la de sesan, pero aqui paso tambien el formulario para así si tengo varios formularios idepedientes poder hacer esto si tener que duplicar y modificar la funcion, cosa que pasaria en la funcion de sesan x que el formulario esta explicito en las lineas de la funcion

esta fucion la podriamos usar en otro checkbox que selecione y deselecione todos en uno solo

<form name=formulario>
<input type=checkbox onclick="selydestodos(this.form,this.checked);"><br>
<input type=checkbox>Opcion 1<br>
<input type=checkbox>Opcion 1<br>
<input type=checkbox>Opcion 1<br>
<input type=checkbox>Opcion 1<br>

<a href=javascript:selydestodos(document.formulario,1)>Selecionar Todos</a><br>
<a href=javascript:selydestodos(document.formulario,0)>Quitar Todos</a><br>
</form>

o bien idepedientes como el ejmplo de desarrolloweb una liga que mande la funcion a desactivar y otra a desactivar

20/9/2006
!! Muy bueno el script !!
El mismo efecto por ejemplo para
de 'deseleccionar' puede lograrse de otro modo.
Observen que en este caso el checkbox es el campo
llamado 'chequeo' en el formulario 'datos'.
La funcion 'quitar()' es invocada por un boton .
Los 'checbox' están implementados
de la siguiente forma:
La variable limite esla cantidad de checkboxes
que aparecen en el formulario.

<form name="datos">
<input name="chequeo[]" type="checkbox" id="chequeo"
title="Confirme aqui el articulo deseado">

<script language="JavaScript" type="text/JavaScript">
function quitar()
{

for (n=0; n <=limite; n++)
{
document.datos.chequeo[n].checked=false;
}
}
</script>

Pablin

24/12/2006
Para aunar las dos funciones que se explican en este formulario, y lograr que al checkear un check box se marquen todos los demás checkboxes, y a al mismo tiempo que al descheckearlo, los demás checkboxes hagan lo mismo, hice algo así:
1º Creo el formulario y el checkbox maestro:
<form id="f1" name="f1">
<input type="checkbox" id="seleccionar" name="seleccionar" onclick="seleccionar()">
</form>
2º Luego creo el script para la función:
<script type="text/javascript">
function seleccionar(){
for (i=0;i<document.f1.elements.length;i++)
if(document.f1.elements[i].type == "checkbox")
if(document.f1.seleccionar.checked == 1)
document.f1.elements[i].checked=1
else if(document.f1.seleccionar.checked == 0)
document.f1.elements[i].checked=0
}
</script>
Bueno eso es todo.
Saludos y espero que sirva!

OMA

07/2/2008
No es muy correcto el meter enlaces "javascript:" dentro de un href. Esa forma de utilizar JS es obsoleta y no está admitida por el W3C. De hecho, si lo haces así, tu página no pasa la validación del "validator.w3.org". Una forma más correcta de hacerlo (y que sí valida) sería:

<div id="enlaces_selección">
<span onclick="seleccionar_todo()">Marcar todos</span> |
<span onclick="deseleccionar_todo()">Marcar ninguno</span>
</div>

Para que cambie el cursor de ratón al pasar por encima habría que agregar un CSS tal que así:

div#enlaces_seleccion span {cursor:pointer}

Se debería cuidar más la calidad del código que aparece en páginas didácticas como esta. Si no, la gente que venga a aprender se quedará con técnicas incorrectas y/o obsoletas.

OMA

Leonardo

29/9/2008
Estos articulos de casos que son comunes en la progamación web en realidad ayudanm mucho, muchas gracias!!!

martin

10/5/2010
seleccionar 2 tipos de checkbox
Para seleccionar dos tipos de checkbox a lo que me refiero es que si tienes un checkbox uno grupo uno y otro grupo 2 seria de esta manera

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
<!--
function ChequearAlgunos2(chkbox,numero)
{
for (var i=0;i < document.forms["formul"].elements.length;i++)
{
var elemento = document.forms["formul"].elements[i];
if(elemento.type=="checkbox")
{ if(numero==elemento.value)
{
elemento.checked = chkbox.checked
}
}

}
}


-->
</script>

</head>
<body>
<form name="formul" action="" method="post">
Título (Grupo 001)</div>
<input onclick="ChequearAlgunos2(this,2);" name="2" type="checkbox" value="2" id="2"/><br/><br/>
Opt 001<input type="checkbox" value="2" name="valor001" /><br/>
Opt 002<input type="checkbox" value="2" name="valor002" /><br/>
Opt 003<input type="checkbox" value="2" name="valor003" /><br/><br/><br/>
Título (Grupo 002)</div>
<input onclick="ChequearAlgunos2(this,3);" name="3" type="checkbox" value="3" id="3"/><br/><br/>
OptB 001<input type="checkbox" value="3" name="valor004" /><br/>
OptB 002<input type="checkbox" value="3" name="valor005" /><br/>
OptB 003<input type="checkbox" value="3" name="valor006" /><br/>
</form>

</body>
</html>

lordonny

16/9/2011
Checkbox
Gracias por las ideas, me hizo mucha falta, pero encontré otro método en vez de usar un enlace para activar y otro para desactivar, se puede utilizar un solo enlace para activar y desactivar...

Este es el JScript:
<script>
function seleccionar() {
for (i=0;i<document.formulario.elements.length;i++) {
if(document.formulario.elements[i].type == "checkbox") {
if(document.formulario.elements[i].checked == 1)
document.formulario.elements[i].checked=0
else if(document.formulario.elements[i].checked == 0)
document.formulario.elements[i].checked=1
}
}
}
</script>

En el formulario va esto:
<form name="formulario">
<input type="checkbox" name="cerrar">
<h2 id="letra" onClick="seleccionar()">No Cerrar Sesion</h2>
<form name="formulario"

Para que el cursos cambie en el texto "No Cerrar Sesion", se le puede agregar un codigo CSS de la siguiente forma:
h2 {cursor:pointer}

Bueno eso es todo, tambien se le pueden agregar más checkbox de acuerdo al caso que se requiere :D Saludos!!!

leonardo

28/9/2011
Util
Un código bastante útil,

Gracias

Esau

23/10/2011
Otra idea para mejorar EL MARCAR O DESMARCAR CHECKBOX
la primera parte quedaria

Todos<input type="checkbox" name="check" onclick="marcar(this.checked)">
<input type='checkbox' name=c1>
<input type='checkbox' name=c2>
<input type='checkbox' name=c3>
<input type='checkbox' name=c4>

segunda parte la funcion

function marcar(c)
{ a=document.getElementsByTagName("INPUT");
for(b=0;b<a.length;b++)
if(a[b].type=="checkbox") a[b].checked=c;
}

pudene incluir cualquier tipo de INPUT la funcion solo tomara en cuenta el checkbox

juan carlos

16/1/2015
Gracias por el codigo
Gracias por el codigo, me servicio para lo que estoy realizando actualmente. muchas gracias

Carmen

09/4/2017
No me funciona
Hola como estás, sabes que no se porq no me funciona tengo lo siguiente en mi controlador
/** Borrar check box */
$scope.supr = function supr() {
for (i=0;i<document.f1.elements.length;i++) {
if(document.f1.elements[i].type == "checkbox") {
if(document.f1.elements[i].checked == 1)
document.f1.elements[i].checked=0
else if(document.f1.elements[i].checked == 0)
document.f1.elements[i].checked=1
}
}
}
y llamo la función de la siguiente forma en la vista:
en mi botón onclick="supr()"