Delo z radijskimi gumbi v JavaScript

Poglejmo si zdaj delo z radijskimi gumbi. Predstavljajo skupino stikal, iz katerih je lahko izbrano le eno. Da je več radijskih gumbov skupina, morajo imeti enako vrednost atributa name:

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

Da pa lahko na JavaScript razlikujemo, kateri gumb je bil izbran, vsakemu radijskemu gumbu v skupini dodamo atribute value z različno vrednostjo:

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

Da neki radijski gumb naredimo privzeto označenega, mu moramo dodati atribut checked:

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

Poglejmo si v praksi, kako delati s takšnimi gumbi v JavaScript. Naj imamo zgoraj predstavljeno skupino radijskih gumbov, in tudi običajen gumb:

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

Naredimo tako, da se ob kliku na gumb na zaslon izpiše value tistega radijskega gumba, ki je trenutno označen.

Za rešitev problema je potrebno prebrati vse naše radijske gumbe z zanko in določiti, kateri izmed njih je izbran. Za to je potrebno prebrati vrednost lastnosti checked vsakega izmed radijskih gumbov. Tisti, pri katerem je ta lastnost enaka true - je ta radijski gumb izbran.

Uresničimo opisano:

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

Podani so 3 radijski gumbi, odstavek in gumb. Ob kliku na gumb izpišite v odstavek value označenega radijskega gumba.