CheckAll en JavaScript

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.

checkall.jpg

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; iejemplo funcionando.

Comentarios Total 9 comentarios

SERGIO
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

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

Traductor
Publicado: 29/06/2008 4:32 pm

Gracias!! ya lo estoy usando en mi sitio :)

Jhonatan
Publicado: 31/07/2008 11:17 am

Muy bueno y practico, tambien lo estoy usando en mi sistema..saludos!!

Carlos
Publicado: 03/12/2008 11:58 pm

Excelente!!! es justo lo que estaba buscando, muchas gracias por compartir el codigo.

Saludos

Nicolas Ríos
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;
}
}
}
}

Sebastian
Publicado: 29/03/2009 12:04 pm

Gracias. Sabia que habia una forma mas practica de hacerlo. Me sirvio de 10!!!

Isabel
Publicado: 06/08/2009 10:18 am

Es una maravilla de función. Es justo lo que buscaba.

AngelFQC
Publicado: 22/10/2009 1:21 pm

hombre, gracias!!!
me ha servido de mucho

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)