JavaScript-те радиобатырмалармен жұмыс

Енді радиобатырмалармен жұмыс істейік. Олар бір-бірінен тек біреуін таңдауға болатын батырмалар тобын білдіреді. Бірнеше радиобатырманың бір топ болуы үшін, олардың name атрибуты бірдей болуы керек:

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

Ал JavaScript арқылы қай батырма таңдалғанын анықтау үшін, әрбір радиобатырмаға әртүрлі мәні бар value атрибуттарын қосады:

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

Әдепкі бойынша белгілі бір радиобатырманы таңдалған ету үшін, оған checked атрибутін беру керек:

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

Енді JavaScript-те мұндай батырмалармен қалай жұмыс істелетінін тәжірибеде көрейік. Бізде жоғарыда көрсетілген радиобатырмалар тобы және қарапайым батырма болсын:

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

Батырманы басқан кезде экранда сол уақытта таңдалған радиобатырманың value мәні шығарылсын.

Есепті шешу үшін барлық радиобатырмаларды цикл арқылы аралап, қайсысы таңдалғанын анықтау керек. Ол үшін әрбір араланатын радиобатырманың checked қасиетінің мәнін оқу керек. Оның бұл қасиеті true-ге тең болатын радиобатырма - сол таңдалған болады.

Сипатталғанды енгізейік:

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

3 радиобатырма, абзац және батырма берілген. Батырманы басқан кезде абзацқа таңдалған радиобатырманың value мәнін шығарыңыз.