 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Marcar o desmarcar todos los checkbox de un formulario con 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.
14/12/05 - 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.
+ 1 categoria relacionada
+ 4 comentarios (Añadir)
+ 3 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 4 comentarios revisados |
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.
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
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>
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!
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
