El siguiente ejemplo explica como lograr que mediante un checkbox, logremos marcar o desmarcar todo un grupo de opciones. Esto es en el caso que deseamos por ejemplo seleccionar todos los registros de un datagrid para procesarlos en grupo.
Sea que tengamos una tabla con los datos de algunos usuarios y deseamos que mediante una opción se puedan seleccionar todos los registros de la tabla. En la siguiente tabla tenemos varios elementos Checkbox pero uno de ellos el que nos permitirá marcar todos los demás se llama all, esto lo tendremos en cuenta al momento de crear nuestra función javascript para marcar todos.
<table>
<tr>
<td bgcolor="#000000">Nombre</td>
<td bgcolor="#000000">Apellido</td>
<td bgcolor="#000000">
<input type="checkbox" name="all" id="all"
onclick="checkAll();" />
</td>
</tr>
<tr>
<td>Jim</td>
<td>Penaloza</td>
<td><input name="id01" type="checkbox" id="id01" /></td>
</tr>
<tr>
<td>Jose Luis </td>
<td>Prado</td>
<td><input name="id02" type="checkbox" id="id02" /></td>
</tr>
<tr>
<td>Joseph</td>
<td>Mondragon</td>
<td><input name="id03" type="checkbox" id="id03" /></td>
</tr>
</table>
Entonces el siguiente paso es crear la función checkAll, que se encargará de seleccionar todos los registros. Para ello primero obtenemos todos los elementos del tipo INPUT en un array y luego lo recorremos para marcar como seleccionado cada input del tipo checkbox.
function checkAll() {
var nodoCheck = document.getElementsByTagName(«input»);
var varCheck = document.getElementById(«all»).checked;
for (i=0; i
Comentarios Total 9 comentarios
Publicado: 04/01/2007 5:20 pm
Bueno, sólo te quería comentar que en la línea 3 del script hay un error de sintaxis, por lo que al copiarlo el ejemplo no funciona, debería quedar así…
var varCheck = document.getElementById(«checkall»).checked;
Gracias….igual me sirvio…bye
Publicado: 04/01/2007 11:24 pm
Hola, gracias por tu comentario fue un pequeño lapsus, ya corregi el código fuente, lo que pasa que siempre uso un funcion llamada getId la cual es:
function getId(varid) {
return document.getElementById(varid);
}
Esto para ahorra líneas de código. Saludos.
Publicado: 29/06/2008 4:32 pm
Gracias!! ya lo estoy usando en mi sitio :)
Publicado: 31/07/2008 11:17 am
Muy bueno y practico, tambien lo estoy usando en mi sistema..saludos!!
Publicado: 03/12/2008 11:58 pm
Excelente!!! es justo lo que estaba buscando, muchas gracias por compartir el codigo.
Saludos
Publicado: 11/12/2008 4:59 pm
Bueno, pues me parecio bien este codigo, bastante util aunque si tienes varias tablas con registros por ejemplo registros por mes y tienes todos los años al querer seleccionarlos los marcaria todos, por esto paso un update que nos puede servir atodos, en mi caso, ami me funciono al 100%:
Para llamar a la funcion:
checkAll(‘input’,’elem_01′,’checkbox’);
// Donde todos los checkbox ID empiezan con elem_01
function checkAll(tagname,switche,typeswitch) {
var nodoCheck = document.getElementsByTagName(tagname);
var varCheck = document.getElementById(switche).checked;
var expresion = ‘/^’+switche+’_+/’;
for (i=0; i<nodoCheck.length; i++){
var idnodo = nodoCheck[i].id.toString();
match = (idnodo.search(eval(expresion))==0)?true:false;
if (match){
if (nodoCheck[i].type == typeswitch && nodoCheck[i].disabled == false) {
nodoCheck[i].checked = varCheck;
}
}
}
}
Publicado: 29/03/2009 12:04 pm
Gracias. Sabia que habia una forma mas practica de hacerlo. Me sirvio de 10!!!
Publicado: 06/08/2009 10:18 am
Es una maravilla de función. Es justo lo que buscaba.
Publicado: 22/10/2009 1:21 pm
hombre, gracias!!!
me ha servido de mucho