Checkbox: Seleccionar, deseleccionar todos

Posted on | abril 6, 2010 | 2 Comments

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>

Comments

Entradas recientes

• Google lanza plugin que soporta video y voz en Gmail sobre Linux
• Una forma de decir hasta luego
• Checkbox: Seleccionar, deseleccionar todos
• ¿¿Reactive su cuenta de GMail??
• Descargar Videos Youtube en tu navegador Google Chrome

Blogs

• Amnesiac
• Artzneo
• Roxoroxo
• Vidibell

Mi Twitter

• TolerantX: @vidibell Compra tu nombre .com - posted on 10/09/2010 11:41:33
• TolerantX: Buenos días! xD - posted on 10/09/2010 09:53:14
• TolerantX: @roxoroxo Un mercado que no ha sido tomado? - posted on 09/09/2010 13:32:52
• TolerantX: Llevando a los límites: Google Instant http://bit.ly/dekpZm - posted on 09/09/2010 13:31:52
• TolerantX: Baja audio de Youtube http://bit.ly/cdS4gO - posted on 30/08/2010 13:13:47

Delicious

• No bookmarks avaliable.