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:

html<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:

html<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:

html<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:

html<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:

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