Come controllare il numero delle caselle selezionate

A volte capita di dover contare quante checkbox ( caselle ) ha selezionato l'utente in una form. Ad esempio, per evitare che ne selezioni più di due o tre. Questo problema si può risolvere facilmente con il linguaggio Javascript.

Il modulo della Form ( Html )

La prima cosa da fare è costruire un modulo form nel documento Html. Ad esempio, nel seguente codice dico all'utente di selezionare soltanto due caselle.

<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>

Quando l'utente visualizza la pagina, la form viene visualizzata sul suo browser nel seguente modo:

esempio di form sul browser

Il modulo ( form ) ha però quattro ipotesi selezionabili. Come faccio ad evitare che l'utente ne selezioni più di due?

Il linguaggio HTML non mi è d'aiuto, per risolvere questo problema. Devo creare un apposito script in linguaggio Javascript.

Lo script per contare le caselle selezionate nella form ( Javascript )

Vado nella sezione Head del documento HTML e creo una funzione Javascript personalizzata assegnandogli come nome ctr().

<html>
<head>
<script>
var conta=0;
function ctr(quale)
{
if (quale.checked) {
conta++;
if (conta > 2) {
alert("Puoi seleazionare solo 2 caselle");
quale.checked=false;
conta--;
}
} else {
conta>0?conta--:null;
}
}
</script>

</head>
<body>
(....)
</body>
</html>

Poi torno nella sezione Body del documento Html e modifico il codice della Form, inserendo in ogni casella ( input ) l'evento onClick che richiama la funzione ctr().

<form name="modulo">
Seleziona due ipotesi
<input type=checkbox name=checkarray[] value=1 onClick="ctr(this)">Ipotesi 1
<input type=checkbox name=checkarray[] value=2 onClick="ctr(this)">Ipotesi 2
<input type=checkbox name=checkarray[] value=3 onClick="ctr(this)">Ipotesi 3
<input type=checkbox name=checkarray[] value=4 onClick="ctr(this)">Ipotesi 4
<input type="submit" value="Conferma">
</form>

Nel momento in cui l'utente spunta una casella (evento) della form, la clausola onClick esegue la funzione ctr().

Per questa ragione è necessario che la funzione ctr() sia dichiarata nella sezione head del codice HTML, prima della sezione Body. In questo modo viene caricata in memoria ed è sempre pronta all'uso.

Cosa accade quando un utente spunta una checkbox?

L'esecuzione passa alla funzione ctr(this) dove per "this" si intende il passaggio del nome dell'oggetto da cui parte il richiamo alla funzione.

la selezione di due caselle nel modulo

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".

algoritmo o flow chart delle caselle selezionate nella form

Quando la variabile "conta" ha un valore superiore a 2 viene visualizzata una finestra pop up di allarme ( alert ) con il messaggio "Puoi seleazionare solo 2 caselle".

il messaggio nella finestra di dialogo avverte l'utente dell'errore nella selezione

Per proseguire l'utente deve cliccare sul pulsante OK nella finestra di dialogo e l'ultima casella spuntata viene automaticamente annullata.

la spunta in eccesso è annullata

In questo modo lo script controlla le caselle selezionate dall'utente sulla Form in tempo reale e prima ancora che l'utente confermi la scelta.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Javascript

Le strutture di controllo

Gestione degli errori ed eccezioni

Le strutture cicliche

FAQ