Работа з радыёкнопкамі ў 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 адзначанай радыёкнопкі.