Corsi on-line

Selezione veloce di checkbox con jQuery

Una delle domande più frequenti che viene posta nei forum di discussione, soprattutto da chi pratica da poco tempo lo sviluppo lato client, riguarda la procedura necessaria per selezionare (e deselezionare) simultaneamente tutte le checkbox presenti in un modulo per l’invio di feedback ad un sito Web; in questo post vedremo come questa problematica possa essere risolta molto velocemente utilizzando il framework Ajax jQuery. Cominciamo subito con il proporre il codice JavaScript necessario:

$('.select-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
	return false;
});
$('.reset-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
	return false;
});

Abbiamo quindi due selettori: “select-all” e “reset-all”, il primo permetterà la selezione simultanea di tutte le checkbox, il secondo servirà per deselezionarle; richiamare i selettori in una pagina Web sarà semplicissimo:

<div class="options">
	<ul>
		<li><a href="#" class="select-all">Seleziona tutto</a></li>
		<li><a href="#" class="reset-all">Deseleziona tutto</a></li>
	</ul>
	<input type="checkbox" id="a" /><label for="a">a</label>
	<input type="checkbox" id="b" /><label for="b">b</label>
	<input type="checkbox" id="c" /><label for="c">c</label>
</div>

Ricordatevi sempre di utilizzare il corretto riferimento alla classe all’interno del “div” che contiene le checkbox.

Post correlati
I più letti del mese
Tematiche