Darbas su radio mygtukais JavaScript

Dabar pažvelkime, kaip dirbti su radio mygtukais. Jie yra perjungikų grupė, iš kurios gali būti pasirinktas tik vienas. Kad keli radio mygtukai sudarytų grupę, jie turi turėti vienodą name atributo reikšmę:

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

O kad JavaScript atpažintų, kuris tiksliai mygtukas buvo pasirinktas, kiekvienam radio mygtukui grupėje pridedami value atributai su skirtingomis reikšmėmis:

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

Kad pagal nutylėjimą kuris nors radio mygtukas būtų pažymėtas, jam reikia nustatyti checked atributą:

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

Pažiūrėkime praktiškai, kaip dirbti su tokiais mygtukais naudojant JavaScript. Tarkime, mes turime aukščiau pateiktą radio mygtukų grupę, taip pat įprastą mygtuką:

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

Padarykime taip, kad paspaudus mygtuką ekrane būtų išvestas value to radio mygtuko, kuris šiuo metu yra pažymėtas.

Užduočiai išspręsti reikia išvardinti visus mūsų radio mygtukus ciklu ir nustatyti, kuris iš jų yra pasirinktas. Tam reikia nuskaityti kiekvieno iš radio mygtukų savybės checked reikšmę. Tas, kurio ši savybė lygi true - tas radio mygtukas ir yra pasirinktas.

Įgyvendinkime aprašytą:

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

Duoti 3 radio mygtukai, pastraipa ir mygtukas. Paspaudus mygtuką, pastraipoje atvaizduokite value pažymėto radio mygtuko reikšmę.