Selezionare tutte le Checkbox con Javascript

In più articoli ho menzionato a come fare per selezionare tutte le checkbox di un form contemporanemante usando Javascript.

Oggi vi spiego come fare.

Prima di tutto guardatevi questo esempio:

<?php
echo '<table id="example" class="display"><thead>';
echo '<th><a href="javascript:selectAll();">Select All</a></th>';
echo '<th>NOME</th>';
echo '<th>COGNOME</th>';
echo '<th>EMAIL</th>';
echo '<th>DATA DI REGISTRAZIONE</th>';
echo '<th>DATA DI NASCITA</th>';
echo '<th>NOTE</th>';
echo '<th></th></thead>';
echo '<tfoot>';
echo '<th><a href="javascript:selectAll();">Select All</a></th>';
echo '<th>NOME</th>';
echo '<th>COGNOME</th>';
echo '<th>EMAIL</th>';
echo '<th>DATA DI REGISTRAZIONE</th>';
echo '<th>DATA DI NASCITA</th>';
echo '<th>NOTE</th>';
echo '<th></th></tfoot>';
foreach (showUtenti() as $row) {
echo '<tr><td><input type="checkbox" name="check[]" value="' . $row['utente_email'] . '" /></td>';
echo '<td>' . $row['utente_nome'] . '</td>';
echo '<td>' . $row['utente_cognome'] . '</td>';
echo '<td>' . $row['utente_email'] . '</td>';
echo '<td>' . $row['utente_reg'] . '</td>';
echo '<td>' . $row['utente_data'] . '</td>';
echo '<td>' . $row['note'] . '</td>';
}
echo '</table>';
?>
</form>

Questo scriptino PHP estrapola i dati da un db eseguendo una query con la funzione showUtenti(), e mette i dati in tabella.

Una colonna di questa tabella è una checkbox:

echo '<tr><td><input type="checkbox" name="check[]" value="' . $row['utente_email'] . '" /></td>';

Come vedete abbiamo anche un link che richiama una funzione JS:

echo '<th><a href="javascript:selectAll();">Select All</a></th>';

Infine notate che la tabella sta dentro un form; il form ci serve per identificare la prte HTML che ci interessa (e poi in questo caso anche per inviare dati tramite PHP, ma in questo caso nn ci interessa).

Quello che ci interessa è invece la funzione Javascript da includere nell'head della pagina:

<script type="text/javascript">
function selectAll() {
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>

Con la variabile modulo identifichiamo il form (che per grande fantasia si chiama modulo).

Poi cicliamo attraverso il form alla ricerca del type checkbox.

Se sono "ceccati" li deselziona, sennò li seleziona.