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 сини чиқаринг.