Lavorare con i pulsanti radio in JavaScript

Ora lavoriamo con i pulsanti radio. Rappresentano un gruppo di interruttori, dei quali può essere selezionato solo uno. Affinché più pulsanti radio formino un gruppo, devono avere lo stesso valore dell'attributo name:

<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

E per distinguere in JavaScript quale pulsante è stato selezionato, a ogni pulsante radio nel gruppo vengono aggiunti attributi value con valori diversi:

<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Per rendere un pulsante radio selezionato per impostazione predefinita, è necessario assegnargli l'attributo checked:

<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

Vediamo in pratica come lavorare con questi pulsanti in JavaScript. Supponiamo di avere il gruppo di pulsanti radio presentato sopra, e anche un pulsante normale:

<input type="submit" id="button">

Facciamo in modo che cliccando sul pulsante, venga visualizzato sullo schermo il value del pulsante radio che è attualmente selezionato.

Per risolvere il problema è necessario scorrere tutti i nostri pulsanti radio con un ciclo e determinare quale di essi è selezionato. Per questo bisogna leggere il valore della proprietà checked di ciascuno dei pulsanti radio iterati. Quello per cui questa proprietà è uguale a true - è il pulsante radio selezionato.

Implementiamo quanto descritto:

let radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
	for (let radio of radios) {
		if (radio.checked) {
			console.log(radio.value);
		}
	}
});

Sono dati 3 pulsanti radio, un paragrafo e un pulsante. Al click sul pulsante, visualizza nel paragrafo il value del pulsante radio selezionato.