Praca z przyciskami radiowymi w JavaScript

Popracujmy teraz z przyciskami radiowymi. Reprezentują one grupę przełączników, z których można wybrać tylko jeden. Aby kilka przycisków radiowych tworzyło grupę, muszą mieć tę samą wartość atrybutu name:

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

Aby odróżnić w JavaScript, który dokładnie przycisk został wybrany, każdemu przyciskowi radiowemu w grupie dodaje się atrybuty value z różnymi wartościami:

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

Aby domyślnie zaznaczyć jakiś przycisk radiowy, trzeba mu ustawić atrybut checked:

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

Spójrzmy w praktyce, jak pracować z takimi przyciskami w JavaScript. Niech mamy przedstawioną powyżej grupę przycisków radiowych, a także zwykły przycisk:

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

Sprawmy, aby po kliknięciu przycisku na ekranie wyświetliło się value tego przycisku radiowego, który jest aktualnie zaznaczony.

Aby rozwiązać zadanie, należy przejrzeć wszystkie nasze przyciski radiowe pętlą i określić, który z nich jest wybrany. W tym celu trzeba odczytywać wartość właściwości checked każdego z przeglądanych przycisków radiowych. Ten, którego ta właściwość jest równa true - ten przycisk radiowy jest wybrany.

Zrealizujmy opisane:

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

Dane są 3 przyciski radiowe, akapit i przycisk. Po kliknięciu przycisku wypisz w akapicie value zaznaczonego przycisku radiowego.