Lucrul cu butoanele radio în JavaScript

Să lucrăm acum cu butoanele radio. Ele reprezintă un grup de comutatoare, dintre care poate fi selectat doar unul. Pentru ca mai multe butoane radio să formeze un grup, acestea trebuie să aibă aceeași valoare a atributului name:

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

Iar pentru a distinge în JavaScript, care anume buton a fost selectat, fiecărui buton radio din grup i se adaugă atribute value cu valori diferite:

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

Pentru a face un buton radio bifat implicit, acestuia i se atribuie atributul checked:

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

Să vedem în practică cum să lucrăm cu astfel de butoane în JavaScript. Să presupunem că avem grupul de butoane radio prezentat mai sus, precum și un buton obișnuit:

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

Să facem astfel încât la click pe buton să se afișeze pe ecran value-ul acelui buton radio care este bifat în acel moment.

Pentru rezolvarea sarcinii este necesar să parcurgem toate butoanele noastre radio cu un ciclu și să determinăm care dintre ele este selectată. Pentru aceasta trebuie să citim valoarea proprietății checked a fiecăruia dintre butoanele radio parcurse. La care această proprietate este egală cu true - acel buton radio este selectat.

Să implementăm descrisul:

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);
		}
	}
});

Sunt date 3 butoane radio, un paragraf și un buton. La click pe buton afișați în paragraf value-ul butonului radio bifat.