« Ritorna al blog
Ritorna alla lista completa degli articoli
Oggetti radio e checkbox in JavaScript
JAVASCRIPT - maggio 21, 2021Con i pulsanti di scelta (radio) e le caselle di controllo (checkbox) possiamo effettuare delle scelte tra valori preimpostati. I pulsanti di scelta vengono generalmente usati per fare scelte esclusive mentre le caselle di controllo una o più scelte. In questo esempio l'utente dovrà scegliere tra una serie di opzioni a seconda della domanda posta. La prima domanda presuppone una sola possibile risposta mentre la seconda almeno una o più.
Per prima cosa creiamo la nostra pagine base in HTML. Io ho scelto l'ottimo Visual Studio Code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript:radio button object</title>
<script type="text/javascript">
// Codice JavaScript da definire
</script>
</head>
<body>
<h3>Who would you like to be?</h3>
<form>
<label for="n1">
<input type="radio" id="n1" name="names" value="Loe Kowards" checked="checked" /> Loe Kowards
</label>
<br>
<label for="n2">
<input type="radio" id="n2" name="names" value="Larry Kage" /> Larry Kage
</label>
<br>
<label for="n3">
<input type="radio" id="n3" name="names" value="Anna Hindi" /> Anna Hindi
</label>
<br>
<label for="n4">
<input type="radio" id="n4" name="names" value="Paul Season" /> Paul Season
</label>
<br>
<label for="n5">
<input type="radio" id="n5" name="names" value="George Lubrent" /> Geroge Lubrent
</label>
<br>
<input type="button" id="btnName" name="btnName" value="See your choice" />
</form>
<h3>Select your hobbies</h3>
<form>
<label for="h1">
<input type="checkbox" id="h1" name="hobby" value="Footbal" checked="checked" /> Football
</label>
<br>
<label for="h2">
<input type="checkbox" id="h2" name="hobby" value="Volleyball" /> Volleyball
</label>
<br>
<label for="h3">
<input type="checkbox" id="h3" name="hobby" value="Tennis" /> Tennis
</label>
<br>
<label for="h4">
<input type="checkbox" id="h4" name="hobby" value="Ping Pong" /> Ping Pong
</label>
<br>
<label for="h5">
<input type="checkbox" id="h5" name="hobby" value="Golf" /> Golf
</label>
<br>
<input type="button" id="btnHobby" name="btnHobby" value="See your hobbies" />
</form>
</body>
</html>Nella sezione body abbiamo costruito un form in puro HTML. Ogni oggetto radio è stato racchiuso tra i tag label. I tag label svolgono una funzione importante con il loro attributo for perché al click su di esso viene spuntata automaticamente anche la casella di selezione. In questo modo si evita che l'utente debba necessariamente cliccare sull'oggetto radio piuttosto che sulla parte testuale che è generalmente più lunga e facile da individuare. In un dispositivo touch risulta quindi più comodo. Ogni oggetto di tipo radio e checkbox deve avere l'attributo name il cui nome deve essere uguale agli altri oggetti radio.
Adesso non ci resta che aggiungere la parte di codice in JavaScript:
window.onload = init;
function init(){
const el_btnName = document.getElementById("btnName");
const el_btnHobby = document.getElementById("btnHobby");
el_btnName.addEventListener('click', function (e) {
fullName();
}, false);
el_btnHobby.addEventListener("click",function (e){
fullHobbies();
}, false);
}
function fullName() {
var form = document.forms[0];
for (var i = 0; i < form.names.length; i++) {
if (form.names[i].checked) {
break;
}
}
alert("Selected name: " + form.names[i].value + ".");
}
function fullHobbies() {
var form = document.forms[1];
var hobbiesChoice = "\n";
for (var i = 0; i < form.hobby.length; i++) {
if (form.hobby[i].checked) {
hobbiesChoice += form.hobby[i].value + "\n";
}
}
alert("Selected hobbies: " + hobbiesChoice);
}Lo script inizializza due eventi, di tipo "click", su due pulsanti presenti nel codice html che una volta premuti attivano le rispettive funzioni di stampare a video le scelte compiute dall'utente.
Analizziamo l'uso di AddEventListener, ossia:
element.addEventListener(event, function, useCapture);Utilizzando questo approccio è possibile associare un numero teoricamente illimitato di eventi a qualsiasi singolo elemento. L'unica limitazione pratica è la memoria sul lato client e altri problemi di prestazioni, che sono diversi per ogni browser. Riguardo al parametro finale esso controlla il modo in cui il listener reagisce agli eventi di bubbling o capturing. Se impostiamo il parametro useCapture su false (che è il suo valore predefinito), l'evento utilizza la propagazione di tipo bubbling mentre quando è impostato su true avremo una propagazione di tipo capturing. Pertanto, in bubbling, l'evento nonché la sua propagazione partirà dall'elemento selezionato per arrivare a quello più esterno, inversamente dal capturing che partirà invece dall'elemento più esterno per arrivare a quello più interno.
Nel nostro esempio immaginiamo di voler aggiungere la seguente funzionalità:
- Si aggiunga un pulsante di riepilogo delle scelte fatte dall'utente. E' necessario che venga stampato un avviso prima che l'utente veda il suo riepilogo.
Per risolvere questo problema avremo potuto aggiungere semplicemente un alert prima che venisse mostrata la lista ma in questo caso potremo anche sfruttare il capturing.
Nel body dobbiamo aggiungere il nostro pulsante racchiuso in un elemento div:
<hr>
<div id="divSummary">
<input type="button" id="btnSummary" name="btnSummary" value="Summary" />
</div>Il codice JavaScript necessario è il seguente:
const el_divSummary = document.getElementById("divSummary");
const el_btnSummary = document.getElementById("btnSummary");
el_divSummary.addEventListener("click",function (e){
alert("Il programma sta per visualizzare un riepilogo delle tue scelte:");
}, true);
el_btnSummary.addEventListener("click",function (e){
fullName();
fullHobbies();
}, false);Impostando il parametro useCapture a true visualizzeremo prima il messaggio di avviso e poi la lista personalizzata dell'utente. In questo modo abbiamo diviso il codice mantenendo integra la funzione di riepilogo. In un codice più complesso ad esempio, prima della stampa, avremo effettuato probabilmente dei controlli sull'obbligatorietà dei campi prima di far comparire il messaggio di avviso.
Anche in questo ho creato un video esplicativo dove viene realizzato passo dopo passo il seguente tutorial. Buon divertimento.