In questo articolo vogliamo illustrare come sia possibile, mediante l’utilizzo di jQuery, manipolare contemporaneamente tutte le spunte di un gruppo di checkbox.
Le operazioni che vogliamo compiere con il codice jQuery sul gruppo di checkbox sono:
 
» Seleziona Tutto
» Deseleziona Tutto
» Inverti selezione
 
A tutti i checkbox sui quali vogliamo operare assegnamo la classe “selezionabile”, quindi scriveremo un codice html tipo:

<input class="selezionabile" name="cb0" type="checkbox"> checkbox 0
<input class="selezionabile" name="cb1" type="checkbox"> checkbox 1
<input class="selezionabile" name="cb2" type="checkbox"> checkbox 2
<input class="selezionabile" name="cb3" type="checkbox"> checkbox 3
<input class="selezionabile" name="cb4" type="checkbox"> checkbox 4
<input class="selezionabile" name="cb5" type="checkbox"> checkbox 5

Poi aggiungiamo tre semplice bottoni per attivare le funzioni a cui siamo interessati:

<input type="button" value="seleziona tutto">
<input type="button" value="deseleziona tutto">
<input type="button" value="inverti selezione">

Ovviamente dovremo andare a sostituire ai … il codice necessario all’operazione da compiere.
Per selezionare o deselezionare ci basta un semplice comando jQuery.

$('.selezionabile').prop('checked', true);
//agiamo sulla proprietà checked e mettendola a true spuntiamo il checkbox
$('.selezionabile').prop('checked', false);
//agiamo sulla proprietà checked e mettendola a false leviamo la spuntia al checkbox

Quindi il codice HTML completo sarà:

<input type="button" onclick="$('.selezionabile').prop('checked', true);" value="seleziona tutto">
<input type="button" onclick="$('.selezionabile').prop('checked', false);" value="deseleziona tutto">

L’inversione della spunta è leggermente più complessa in quanto per invertire lo stato di un checkbox dobbiamo tenere in considerazione l’attuale stato ed invertirlo, per compiere questa operazione creeremo una funzione javscript da chiamre con con l’onclick del relativo bottone, per compiere questa operazione useremo nuovamente il metodo .prop() di jQuery e lo accoppieremo con il metodo .each() di jQuery:

function invertiSelezione(){
    $('.selezionabile').each(function(){
        $(this).prop('checked',!$(this).prop('checked'));
    })
}

Il metodo each() di jQuery consente di eseguire la stessa operazione su ciascuno degli elementi ritornati dalla selezione (nel nostro caso tutti gli elementi con classe selezionabile). Con la riga:

$(this).prop('checked',!$(this).prop('checked'));

assegnamo di volta in volta al ceckbox in questione il suo complemento, se è vero assegnamo falso, se è falso assegnamo vero.

L’utilizzo di questa funzione si ottiene mediante questo codice html.

<input type="button" onclick="invertiSelezione()" value="inverti selezione">

Non vi resta che mettere insieme tutti i pezzi ed utilizzare il codice oppure scaricare un esempio funzionante.