Ситуация, когда требуется получить значение выбранной радиокнопки, встречается довольно часто. Это особенно актуально для форм, где пользователь может выбирать из нескольких предложенных вариантов.
В 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. Как только находим выбранную кнопку, берем ее значение и прекращаем перебор.
Добавить комментарий