jQuery: implementare il flag "Seleziona tutto"

Con jQuery è possibile implementare in modo rapido il classico flag "Seleziona tutto".

Partiamo da questa struttura HTML:

<table class="table">
	<thead>
		<tr>
			<th scope="col">...</th>
			<th scope="col">...</th>
			<th scope="col">
				<a href="#" class="select-all">Seleziona tutto</a>
			</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

Con jQuery dobbiamo aggiungere o rimuovere una classe sia dalle righe della tabella che dal toggle stesso:

var $toggle = $( ".select-all" );

$toggle.on( "click", function( e ) {
	e.preventDefault();
	var $table = $( this ).parents( "table" );
	$table.find( "tbody > tr" ).toggleClass( "selected" );
	$( this ).toggleClass( "checked" );
});