A rádiógombok kezelése JavaScriptben

Most dolgozzunk rádiógombokkal. Ezek olyan kapcsolók csoportját képviselik, amelyekből csak egy választható ki. Ahhoz, hogy több rádiógomb egy csoportot alkosson, ugyanazt az name attribútum értéket kell megadni nekik:

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

Ahhoz pedig, hogy JavaScriptben meg lehessen különböztetni, melyik gomb lett kiválasztva, minden rádiógombnak a csoporton belül különböző value attribútum értéket kell adni:

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

Ahhoz, hogy egy rádiógomb alapértelmezetten be legyen jelölve, az checked attribútumot kell megadni neki:

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

Nézzük meg gyakorlatban, hogyan kell ilyen gombokkal dolgozni JavaScriptben. Tegyük fel, hogy van egy a fentinek megfelelő rádiógomb csoportunk, és egy sima gombunk:

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

Tegyük fel, hogy a gombra kattintáskor a képernyőre szeretnénk kiírni annak a rádiógombnak a value értékét, amelyik jelenleg be van jelölve.

A feladat megoldásához végig kell iterálni az összes rádiógombon egy ciklussal, és megállapítani, hogy melyik van kiválasztva. Ehhez minden egyes rádiógomb checked tulajdonságát kell ellenőrizni. Amelyiknél ez a tulajdonság true, az a rádiógomb van kiválasztva.

Valósítsuk meg a leírtakat:

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

Adott 3 rádiógomb, egy bekezdés és egy gomb. A gombra kattintva írja ki a bekezdésbe a kiválasztott rádiógomb value értékét.