Il semplice script di questa settimana consente l'attivazione dei checkbox e/o radio button presenti in un form tramite un link rappresentato dalla voce corrispondente a quell'elemento. La visualizzazione dell'esempio allegato chiarirà il funzionamento molto meglio di qualsiasi spiegazione. L'implementazione prevede poche righe di codice Javascript e una piccola regola CSS, oltre al richiamo dall'interno della pagina web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La parte Javascript va inserita all'interno della sezione <head> della pagina. Vediamola:
<SCRIPT language="javascript" TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from older browsers
function toggleCheck(thisField) {
checkSet = eval("document.myForm."+thisField)
checkSet.checked = !(checkSet.checked)
}
function toggleRadio(thisField,thisValue) {
radioSet = eval("document.myForm."+thisField)
for (i=0;i<radioSet.length;i++) {
if (radioSet[i].value == thisValue)
radioSet[i].checked = true
}
}
// End hiding script -->
</SCRIPT>
Tutto molto semplice. 2 sono le funzioni principali. 'toggleCheck' fa riferimento ed è usata per i checkbox. 'toggleRadio' invece per i radio button. Tutto quello che fanno è di andare a verificare lo stato di ciascun elemento presente nel form 'myForm' e di inserire il segno di spunta se esso non è presente. Il codice può essere lasciato così com'è, a patto di mantenere il nome del form su 'myForm'. Ove si scegliesse un altro nome per il modulo nella parte HTML, si dovrà di conseguenza modificare il valore presente nella riga:
eval("document.myForm."+thisField)
## 2: LA SEZIONE CSS
Per la corretta esecuzione dello script su tutti i browser è necessario creare anche una piccola regola CSS:
A.noLink {text-decoration:none; color:black}
Si tratta di una classe (.noLink) da applicare, come vedremo, agli elementi 'à da cui attiveremo checkbox e radio button. Con questo stile faremo in modo che il testo non abbia l'apparenza di un link.
## 3: RICHIAMO INTERNO ALLA PAGINA WEB
Ed eccoci alla parte HTML. Il cuore di tutto è un form:
<form name="myform" action="someaction.cgi">
<a href="javascript:toggleCheck('sun')" CLASS="noLink"><INPUT TYPE="checkbox" NAME="sun"> Sun</a>
<a href="javascript:toggleCheck('moon')" CLASS="noLink"><INPUT TYPE="checkbox" NAME="moon"> Moon</a>
<a href="javascript:toggleCheck('stars')" CLASS="noLink"><INPUT TYPE="checkbox" NAME="stars"> Stars</a>
<a href="javascript:toggleRadio('colorChoicè,'red')" CLASS="noLink"><INPUT TYPE="radio" NAME="colorChoice" VALUE="red"> Red</a>
<a href="javascript:toggleRadio('colorChoicè,'green')" CLASS="noLink"><INPUT TYPE="radio" NAME="colorChoice" VALUE="green"> Green</a>
<a href="javascript:toggleRadio('colorChoicè,'bluè)" CLASS="noLink"><INPUT TYPE="radio" NAME="colorChoice" VALUE="blue"> Blue</a>
</form>
Non è complicato. La differenza con i normali moduli contenenti checkbox e radio button è che i campi input sono racchiusi in un link (a). Notate innanzitutto la classe noLink che li accompagna. E osservate poi come ogni elemento 'à contenga un richiamo alla funzione adatta definita nello script. Il parametro da passare è sempre il nome dell'input (si notino le corrispondenze).
