Raadionuppude kasutamine JavaScriptis

Nüüd töötame raadionuppudega. Need esindavad lülitite rühma, millest saab valida ainult ühe. Et mitu raadionuppu kuuluksid samasse rühma, peavad neil olema sama väärtus atribuudis name:

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

Et JavaScriptis eristada, milline täpselt nupp on valitud, lisatakse igale raadionupule rühmas atribuudid value erineva väärtusega:

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

Et teha mõni raadionupp vaikimisi märgituks, tuleb sellele määrata atribuut checked:

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

Vaatame praktikas, kuidas töötada selliste nuppudega JavaScriptis. Olgu meil üleval esitatud raadionuppude rühm, ning ka tavaline nupp:

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

Teeme nii, et nupule vajutades kuvatakse ekraanil praegu valitud raadionupu value.

Ülesande lahendamiseks on vaja tsükliga läbi käia kõik meie raadionupud ja tuvastada, milline neist on valitud. Selleks tuleb lugeda iga vaadeldava raadionupu omaduse checked väärtus. Kellel see omadus võrdub true - see raadionupp ongi valitud.

Rakendame kirjeldatu:

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

Antud on 3 raadionuppu, lõik ja nupp. Nupule klõpsamisel kuvatakse lõigus valitud raadionupu value.