Как получить значение выбранного радио-кнопки в JS

Быстрый ответ

Для извлечения значения выбранной радиокнопки с помощью JavaScript используйте следующий код:

let selectedValue = document.querySelector('input[name="radioGroup"]:checked')?.value;
// Помните заменить "radioGroup" на имя вашей группы радиокнопок.

Оператор ? предохраняет от ошибок, если никакой переключатель не был активирован.

Работа с множеством групп радиокнопок

Если на вашей странице присутствует несколько групп радиокнопок, и вам необходимо узнать выбранное значение из каждой группы, примените подобный подход для двух разных групп, например radioGroup1 и radioGroup2:

let group1Value = document.querySelector('input[name="radioGroup1"]:checked')?.value;
let group2Value = document.querySelector('input[name="radioGroup2"]:checked')?.value;
// Этот метод представляет из себя изящное решение задачи.

Такой способ обеспечивает точное определение значений соответствующих радиокнопок.

Возможные сложности и способы их устранения

Что делать, если выбор не сделан?

Если ни одна радиокнопка не была выбрана, document.querySelector вернет null. Однако, использование ?.value устраняет прерывание кода и возвращает undefined, помогая таким образом избежать ошибки.

В контексте форм

Если радиокнопки расположены внутри формы, то доступ к ним через document.forms с использованием свойства elements окажется невероятно удобным:

let form = document.forms['myForm'];
let radios = form.elements['radioGroup'];
let selectedRadio = Array.from(radios).find(r => r.checked)?.value;
// Это решение хорошо подходит для структурированного доступа к элементам формы.

Избегаем лишних итераций

Прощай, бесконечные циклы

Вместо того чтобы перебирать все элементы группы, используем спецификатор :checked, который позволяет обращаться непосредственно к активированным радиокнопкам, повышая таким образом производительность и упрощая код.

Преобразование NodeList в массив

Когда есть необходимость преобразовать NodeList в массив для работы с радиокнопками, мы можем использовать Array.from или оператор расширения:

let radiosArray = Array.from(document.getElementsByName("radioGroup"));
// или более современный подход:
let radiosArray = [...document.getElementsByName("radioGroup")];
// ES6 всегда к вашим услугам!

Преобразовав NodeList в массив, вы сможете применять к нему методы массивов, например, .find, чтобы найти выбранное значение.

Отказ от jQuery в целях упрощения кода

Если вы использовали jQuery исключительно для работы с радиокнопками, теперь можете отказаться от него. Так как современный JavaScript позволяет выполнить все необходимые операции без использования внешних библиотек, ваша страница будет более быстрой.

Визуализация

Представьте на мгновение ряд кнопок в видеоигре. Каждая из них отвечает за некое значение:

Когда игрок делает выбор, соответствующая кнопка зажигается:

Выбор участника: 👤 -> 🎯 B

Ваша задача – узнать значение активированной кнопки:

Значение выбранной радиокнопки: B

Такой процесс схож с выбором радиокнопки.

ES6, поддержка браузерами и вы

Вперед, к ES6!

Использование новых возможностей JavaScript, таких как стрелочные функции, шаблонные строки и оператор расширения, делает код более понятным и эффективным.

Поддержка браузерами важна

Методы, такие как document.querySelector, совместимы со всеми современными браузерами. Однако важно проверять поддержку, если ваша целевая аудитория представлена различными браузерами.

Практика – это лучший учитель

Практикуйтесь, используя примеры и экспериментируя с кодом на ресурсах вроде JSFiddle (http://jsfiddle.net/Xxxd3/610/), чтобы улучшить понимание работы с радиокнопками.

Повышаем стандарты

Применение различных подходов и современных стандартов помогает нам двигаться к будущему с более чистым и эффективным кодом.

Полезные материалы

1. <input type="radio"> – HTML: HyperText Markup Language | MDN — Общее руководство по работе с радиокнопками в HTML.
2. HTML DOM Input Radio value Property — Изучите детали получения значения радиокнопки.
3. Form properties and methods — Углубите знания в обработке элементов форм с помощью JavaScript.
4. The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery) — SitePoint — Руководство по манипуляции с DOM без jQuery.
5. :checked Selector | jQuery API Documentation — Как получить выбранное значение радиокнопки в jQuery.