Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
2 мин
1701

Получение значения выбранной радиокнопки в HTML и JavaScript

Ситуация, когда требуется получить значение выбранной радиокнопки, встречается довольно часто. Это особенно актуально для форм, где пользователь

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

В HTML радиокнопки представлены следующим образом:

<div id="options">
  <input type="radio" id="option1" name="option" value="Option 1"> Option 1
  <input type="radio" id="option2" name="option" value="Option 2"> Option 2
  <input type="radio" id="option3" name="option" value="Option 3" checked="checked"> Option 3
</div>

В данном случае представлены три радиокнопки, каждая из которых имеет свое уникальное значение. По умолчанию выбран вариант «Option 3».

Однако, при попытке получить значение выбранной радиокнопки с помощью JavaScript, можно столкнуться с проблемой. Неправильное обращение к элементам может привести к получению undefined вместо ожидаемого результата.

var options = document.getElementById('options').value;
var option_value;
if(options == 'Option 1'){
    option_value = document.getElementById('option1').value;
}else if(options == 'Option 2'){
    option_value = document.getElementById('option2').value;
}else if(options == 'Option 3'){
    option_value = document.getElementById('option3').value;
}

document.getElementById('results').innerHTML = option_value;

В данном случае происходит попытка получить значение элемента div, что не является корректной операцией для данного типа элементов, поэтому и возвращается undefined.

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

var options = document.getElementsByName('option');
var option_value;
for(var i = 0; i &lt; options.length; i++){
    if(options[i].checked){
        option_value = options[i].value;
        break;
    }
}

document.getElementById('results').innerHTML = option_value;

Здесь с помощью метода getElementsByName получаем список всех радиокнопок. Затем с помощью цикла перебираем все радиокнопки и проверяем, какая из них выбрана с помощью свойства checked. Как только находим выбранную кнопку, берем ее значение и прекращаем перебор.

Добавить комментарий

Подарок
Забрать подарок