jQuery: selezionare, deselezionare o invertire la selezione di un gruppo di checkbox

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:

 checkbox 0
 checkbox 1
 checkbox 2
 checkbox 3
 checkbox 4
 checkbox 5

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



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', flase);
//agiamo sulla proprietà checked e mettendola a false leviamo la spuntia al checkbox

Quindi il codice HTML completo sarà:


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.

Non vi resta che mettere insieme tutti i pezzi ed utilizzare il codice.
 
jQuery