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 маанисин чыгарыңыз.