Работа с радиокнопками в 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);
    }
  }
});