# Работа с радиокнопками в 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` отмеченной радиокнопки.

← →
↑
en ru