Controllare checkbox javascript
Proviamo a costruire insieme una form con controllo interattivo delle
checkbox. Prima di tutto partiamo dal codice html per comprendere il problema.
<form name="modulo">
Seleziona due ipotesi
<input type=checkbox name=checkarray[] value=1>Ipotesi 1
<input type=checkbox name=checkarray[] value=2>Ipotesi 2
<input type=checkbox name=checkarray[] value=3>Ipotesi 3
<input type=checkbox name=checkarray[] value=4>Ipotesi 4
<input type="submit" value="Conferma">
</form> |
Otteniamo una webform in cui l'utente può selezionare quattro
ipotesi differenti in cui l'una non esclude le altre. Come fare ad imporre
la scelta max di due ipotesi? Per farlo si deve ricorrere all'ausilio
del codice javascript. Come prima cosa trasformiamo leggermente il codice
HTML inserendo per ogni checkbox il controllo onClick per catturare l'evento
della spuntatura dell'icona.
<input type=checkbox name=checkarray[] value=1
onClick="ctr(this)"> uno
<input type=checkbox name=checkarray[] value=2 onClick="ctr(this)">
due
<input type=checkbox name=checkarray[] value=3 onClick="ctr(this)">
tre
<input type=checkbox name=checkarray[] value=4 onClick="ctr(this)">
quattro
<input type="submit" value="Conferma">
|
Nel momento in cui l'utente spunta una ipotesi (evento) entra in funzione
il comando onClick che richiama la funzione ctr() allo scopo di contare
quante caselle sono già state spuntate dall'utente. La funzione
ctr() deve essere dichiarata nella sezione head del codice HTML per essere
caricata in memoria ed essere sempre pronta all'uso.
<html>
<head>
<script>
var conta=0;
function ctr(quale)
{
if (quale.checked)
{
conta++;
if (conta > 2)
{
alert("Puoi scegliere nmassimo 2 check !");
quale.checked=false;
conta--;
}
}
else
{
conta>0?conta--:null;
}
}
</script>
</head>
(....)
</html>
|
Cosa accade quando un utente spunta una checkbox? L'esecuzione passa
alla funzione ctr(this). Per "this" si intende il passaggio
del nome dell'oggetto da cui parte il richiamo alla funzione. La funzione
ctr() registra il nome dell'oggetto nella variabile "quale"
e procede a verificare le caselle con status "checked". Ogni
qual volta ne incontra una aumenta di uno la variabile "conta".
Nel momento in cui la variabile "conta" assume un valore superiore
a 2 viene visualizzata a video mediante una pop up (alert) di allarme
con la frase "Puoi scegliere un massimo du due check !" ed è
annullata l'ultima spuntatura della checkbox dell'utente.
ecomatrix
scrivi al sito
ecomatrix@gmail.com
Guide online
