Selezione di tutti i checkbox con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Molte applicazioni Web, come le nostre caselle di posta elettronica, ci hanno abituato a non dover selezionare a mano tutte le opzioni singolarmente, ad esempio per cancellare tutte le email, ma ci mettono a disposizione la famosa opzione toggle all, ovvero seleziona tutte le checkbox in un colpo solo!

Per sfruttare questo sistema ricorriamo a Javascript.

Creiamo un modulo HTML di esempio, il cui bottone di selezione accede, all'evento onclick, alla funzione Javascript che creeremo in seguito:

<form name="modulo">
<input type="checkbox" name="colori" value="Rosso"> Rosso<br>
<input type="checkbox" name="colori" value="Giallo"> Giallo<br>
<input type="checkbox" name="colori" value="Verde"> Verde<br>
<input type="checkbox" name="colori" value="Blu"> Blu<br><br>
<input type="button" value="Seleziona tutto" onclick="SelezTT()">
</form>
Veniamo al codice Javascript completo:
<script type="text/javascript">
function SelezTT()
{
    var i = 0;
    var modulo = document.modulo.elements;
    for (i=0; i<modulo.length; i++)
    {
        if(modulo[i].type == "checkbox")
        {
            modulo[i].checked = !(modulo[i].checked);
        }
    }
}
</script>
Per accedere agli elementi del form utilizziamo la sintassi:
document.modulo.elements
che andiamo a memorizzare in una variabile per rendere più snello il codice.

A questo punto creiamo un ciclo all'interno del quale verifichiamo che solo gli elementi di tipo "checkbox" dovranno essere selezionati.

Prego di prestare attenzione alla forma che ho usato per la selezione e deselezione:
modulo[i].checked = !(modulo[i].checked)
In questo modo avremo, in un colpo solo, la selezione e deselezione delle checkbox, a seconda del fatto che siano già selezionate o meno.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD