HTML radio buttons - учебник по использованию радио кнопок

HTML радиокнопки или radio buttons - это элементы управления, которые позволяют пользователю выбрать только одну опцию из предлагаемого списка. Радиокнопки полезны, когда требуется сделать выбор из нескольких взаимоисключающих вариантов.

<input type="radio" name="option" value="option1"> Option 1


<input type="radio" name="option" value="option2"> Option 2


<input type="radio" name="option" value="option3"> Option 3


В приведенном примере у нас есть три радиокнопки, каждая с атрибутом "name" с одинаковым значением. Это группирует радиокнопки вместе и гарантирует, что только одна опция может быть выбрана внутри этой группы. Значения каждой радиокнопки определены атрибутом "value" и могут быть использованы для обработки выбранной опции на сервере или с помощью JavaScript.

Чтобы код успешно работал, убедитесь, что каждая радиокнопка имеет уникальное значение атрибута "value" и одинаковое значение атрибута "name" для группировки кнопок.

Пример обработки выбранной опции на JavaScript:

let selectedOption = document.querySelector('input[name="option"]:checked').value;

console.log("Выбранная опция: " + selectedOption);

В этом примере мы используем метод querySelector для нахождения выбранного элемента радиокнопки с помощью селектора CSS '[name="option"]:checked'. Затем мы получаем выбранное значение с помощью свойства value и выводим его в консоль.

Радиокнопки могут быть использованы в различных сценариях, включая формы, где пользователи должны сделать выбор из нескольких вариантов, таких как выбор цвета, пола или типа платежа.