Práca s rádiovými tlačidlami v JavaScript

Poďme si teraz vyskúšať prácu s rádiovými tlačidlami. Predstavujú skupinu prepínačov, z ktorých je možné vybrať iba jeden. Aby viacero rádiových tlačidiel tvorilo skupinu, musia mať rovnakú hodnotu atribútu name:

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

A aby bolo možné v JavaScript rozlíšiť, ktoré konkrétne tlačidlo bolo vybrané, pridá sa každej rádiovému tlačidlu v skupine atribút value s rôznou hodnotou:

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

Aby bolo nejaké rádiové tlačidlo označené predvolene, je potrebné mu nastaviť atribút checked:

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

Pozrime sa v praxi, ako pracovať s takýmito tlačidlami v JavaScript. Nech máme vyššie uvedenú skupinu rádiových tlačidiel, a tiež obyčajné tlačidlo:

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

Urobme to tak, aby po kliknutí na tlačidlo sa na obrazovke zobrazilo value toho rádiového tlačidla, ktoré je práve označené.

Pre riešenie úlohy je potrebné prejsť všetky naše rádiové tlačidlá cyklom a určiť, ktoré z nich je vybrané. Na to je potrebné čítať hodnotu vlastnosti checked každého z prechádzaných rádiových tlačidiel. U ktorého táto vlastnosť je rovná true - to rádiové tlačidlo je vybrané.

Realizujme popísané:

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

Sú dané 3 rádiové tlačidlá, odsek a tlačidlo. Po kliknutí na tlačidlo vypíšte do odseku value označeného rádiového tlačidla.