Получение значения выбранной радиокнопки в 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 < options.length; i++){
    if(options[i].checked){
        option_value = options[i].value;
        break;
    }
}

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

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