Lo script che presentiamo consente l'implementazione di una funzionalità ormai molto diffusa, presente, ad esempio, nell'interfaccia di tutti i servizi di posta via web (LIbero, Hotmail, etc). Si tratta di una semplice funzione grazie alla quale, in un form che fa uso di molti check box, è possibile selezionarli o deselezionarli tutti insieme con un solo click. La visualizzazione dell'esempio allegato suggerirà le tantissime possibilità di implementazione dello script.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
All'interno della sezione <head></head> inseriamo il codice Javascript che gestisce il tutto:
<script type="text/javascript">
<!--
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
// -->
</script>
La funzione SetAllCheckBoxes prende 3 parametri: 'FormNamè rappresenta il nome del form presente nella pagina, 'FieldNamè il nome dei check box da selezionare/deselezionare, 'CheckValuè è un valore (true o false) che imposta lo stato dei check box.
Il codice verifica innanzitutto la presenza nella pagina del form con il nome passato come parametro; quindi fa lo stesso con i check box. Infine conta questi ultimi e applica la selezione in base alla scelta dell'utente.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Nel corpo della pagina troveremo ovviamente il nostro form con tanto di check box:
<form method="GET" action="" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
Javascript</label>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">CSS</label>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">HTML</label>
Come si vede, l'attributo 'namè dei check box, deve essere uguale per tutti. Il form termina con 2 pulsanti: sono quelli che attiveranno la funzione SetAllCheckBoxes passando i parametri giusti:
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="Seleziona tutte">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="Togli selezione">
Il secondo si differenzia dal primo solo perchè passa il valore 'falsè invece che 'truè (serve infatti a deselezionare tutti i check box). Notare come i primi 2 parametri corrispondano ai nomi del form e dei check box, anche nell'uso di maiuscole e minuscole.
