Lo script che presentiamo è il classico esempio di come poche righe di codice possano in certi casi apportare enormi vantaggi in termini di usabilità. La situazione è nota a molti. Stiamo controllando l'e-mail su un servizio di posta sul web. Abbiamo decine di messaggi di spam da cancellare. Quanto sarebbe comodo un pulsantino che ci consenta di selezionare in un solo colpo tutti i messaggi? Oppure. Abbiamo davanti una pagina di gestione remota di un database e abbiamo la necessità di selezionare molti record da eliminare. E così via. Nei casi cui abbiamo accennato l'opzione tipica in fase di progettazione dell'interfaccia è quella di utilizzare i checkbox per la selezione dei vari item. Con questo Javascript vedremo come implementare questa funzionalità.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript è composta da poche righe di codice contenute nella sezione <head> </head> della pagina:
<script type="text/javascript">
function checkTutti() {
with (document.modulo) {
for (var i=0; i < elements.length; i++) {
if (elements[i].type == 'checkbox' && elements[i].name == 'cb')
elements[i].checked = true;
}
}
}
function uncheckTutti() {
with (document.modulo) {
for (var i=0; i < elements.length; i++) {
if (elements[i].type == 'checkbox' && elements[i].name == 'cb')
elements[i].checked = false;
}
}
}
Due sole e di semplice comprensione le funzione principali. 'checkTutti' è quella che seleziona tutti gli elementi. Per prima cosa verifichiamo che all'interno della pagina sia presente un form denominato 'modulo':
with (document.modulo) {
Se il modulo con questo nome è presente, passiamo prima a valutare il numero di elementi di cui è composto e quindi quanti di questi sono checkbox. Se ci sono checkbox, dobbiamo anche verificare se il nome loro assegnato sia 'cb':
for (var i=0; i < elements.length; i++) {
if (elements[i].type == 'checkbox' && elements[i].name == 'cb')
Se tutte queste condizioni sono vere, la funzione si occupa di selezionare tutti i checkbox. Come? Sfruttando la prorietà 'checked' che viene impostata su 'truè:
elements[i].checked = true;
Due parole di commento. La funzione mantiene un certo grado di flesibilità, consentendo, ad esempio, di usare più form nella stessa pagina. Il controllo e la selezione, infatti, avvengono solo sul form che specifichiamo nella funzione stessa tramite il suo nome (with (document.modulo)). Con lo stesso criterio, è facile isolare i checkbox da selezionare tramite la verifica del nome:
if (elements[i].type == 'checkbox' && elements[i].name == 'cb')
La funzione 'uncheckTutti()' è identica alla prima, tranne che in un dettaglio: in questo caso la proprietà 'checked' viene settata su 'falsè e quindi i checkbox sono deselezionati.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Il richiamo interno alla pagina Web è un semplicissimo modulo:
<form name="modulo" action="">
<input name="cb" type="checkbox" value="1">
<input name="cb" type="checkbox" value="2">
<input name="cb" type="checkbox" value="3">
<input name="cb" type="checkbox" value="4">
<input name="cb" type="checkbox" value="5">
<input name="cb" type="checkbox" value="6">
<input name="cb" type="checkbox" value="7">
<input name="cb" type="checkbox" value="8">
<input name="cb" type="checkbox" value="9">
<input type="button" value="Seleziona tutti" onclick="checkTutti()">
<input type="button" value="Deseleziona tutti" onclick="checkTutti()">
</form>
Osserviamo innanzitutto la corrispondenza del nome con quello già visto nella parte Javascript:
<form name="modulo" action="">
Stessa cosa si può dire per il nome dei checkbox. L'unica cosa che cambia dall'uno all'altro è infatti il valore che passeremo al momento del submit del modulo.
Le funzione 'checkTutti' e 'uncheckTutti', infine, sono attivate tramite un evento onclick collegato ad un pulsante (si poteva usare anche un link testuale o un'immagine):
<input type="button" value="Seleziona tutti" onclick="checkTutti()">
<input type="button" value="Deseleziona tutti" onclick="checkTutti()">
