Работа с радио бутони в JavaScript

Нека сега да работим с радио бутони. Те представляват група превключватели, от които може да бъде избран само един. За да бъдат няколко радио бутона една група, те трябва да имат еднаква стойност на атрибута name:

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

А за да се разграничи на JavaScript, кой точно бутон е бил избран, на всеки радио бутон в групата се добавят атрибути value с различна стойност:

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

За да се направи даден радио бутон отметнат по подразбиране, на него трябва да се зададе атрибут checked:

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

Нека на практика да видим как се работи с такива бутони на JavaScript. Нека при нас да има представената по-горе група радио бутони, както и обикновен бутон:

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

Нека направим така, че при натискане на бутона на екрана да се изведе value на онзи радио бутон, който е отметнат в дадения момент.

За решаване на задачата е необходимо да се обходят всички наши радио бутони с цикъл и да се определи кой от тях е избран. За това трябва да се прочете стойността на свойството checked на всеки от обхожданите радио бутони. При когото това свойство е равно на true - този радио бутон е избран.

Нека реализираме описаното:

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