Skip to content

6 abril, 2010

4

Checkbox: Seleccionar, deseleccionar todos

Sé que hay muchos ejemplos, guias etc sobre como seleccionar o deseleccionar checkbox en una página web con javascript, pero pocos hacen referencia a hacer una función un poco más generica donde abarque tanto el nombre del formulario, el nombre de elementos a seleccionar y la casilla “todos” también con checkbox.

Tenemos 2 funciones javascript, una que se encarga de seleccionar todos los “checkbox” y la otra función que se encarga de verificar si permanece seleccionado nuestro checkbox que selecciona “todos”:

function checkElements(form, elementAll, elementToCheck) {
    var form, checkbox = form.elements[elementToCheck];
    totalElements = checkbox.length;
    checkboxAll = form.elements[elementAll];

    for(var n=0; n<totalElements; n++) {
        checkbox[n].checked = checkboxAll.checked;
    }
}

function checkElementAll(form, elementAll, elementCheck) {
    var form, counter=0;
    checkbox = form.elements[elementCheck];
    checkboxAll = form.elements[elementAll];
    totalElements = checkbox.length;

    for(var n=0; n<totalElements; n++) {
        if (checkbox[n].checked == true) counter++;
    }
    if (totalElements > counter)
        checkboxAll.checked = false;
    else
        checkboxAll.checked = true;
}

Y un ejemplo de formulario sería algo como lo siguiente:

<form name="nombreFormulario" method="post" action="">
    <p><input type="checkbox" name="selecciona_todos" onclick="checkElements(this.form, this.name, 'frutas[]')" /><label>Todos</label></p>
    <p><input type="checkbox" name="frutas[]" value="manzana" onclick="checkElementAll(this.form, 'selecciona_todos', this.name)" /><label>Manzana</label></p>
    <p><input type="checkbox" name="frutas[]" value="mango" onclick="checkElementAll(this.form, 'selecciona_todos', this.name)" /><label>Mango</label></p>
    <p><input type="checkbox" name="frutas[]" value="pera" onclick="checkElementAll(this.form, 'selecciona_todos', this.name)" /><label>Pera</label></p>
    <p><input type="checkbox" name="frutas[]" value="sandia" onclick="checkElementAll(this.form, 'selecciona_todos', this.name)" /><label>Sandia</label></p>
    <p><input type="checkbox" name="frutas[]" value="naranja" onclick="checkElementAll(this.form, 'selecciona_todos', this.name)" /><label>Naranja</label></p>
</form>

:)

4 Comments Post a comment
  1. francisco
    jun 21 2010

    La idea es buena, estuve buscando una funcionalidad mas completa como la que mencionas, pero no soy muy bueno en javascript, y cuando intento ejecutar tu codigo salen errores
    Espero lo revises

  2. jun 21 2010

    Listo, efectivamente tenía un error, ya está corregido, espero te sirva :)

  3. Jonay
    nov 27 2010

    Una vez tengo implementada la función de seleccionar todos.

    ¿Cómo puedo saber el número de frutas en este caso seleccionadas?

  4. Jorge Matias
    oct 7 2012

    Muchísimas gracias la verdad me sirvió el post para un trabajo practico debía entregar. Un abrazo

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments