Как получить значение выбранной радиокнопки с помощью JavaScript?
Иногда нам может потребоваться получить значение выбранного переключателя в нашем веб-приложении JavaScript.
В этой статье мы рассмотрим, как получить значение выбранного переключателя с помощью JavaScript.
Перебор всех чекбоксов
Мы можем выбрать все радиокнопки в группе и получить радиокнопку, для которой установлено свойство checked: true.
Например, мы можем написать следующий HTML:
<div id="fruits">
<input type="radio" name="fruit" value="apple"> Apple
<input type="radio" name="fruit" value="orange"> Orange
<input type="radio" name="fruit" value="grape" checked="checked"> Grape
</div>
Затем мы можем получить все элементы переключателя с помощью document.querySelectorAll и получить тот, который чекнут, написав:
const fruits = document.querySelectorAll('input[name="fruit"]')
for (const f of fruits) {
if (f.checked) {
console.log(f.value)
}
}
fruits представляет собой объект HTMLCollection со всеми элементами переключателя.
Затем мы используем for-of для перебора переключателей.
В теле цикла мы получаем свойство checked.
И мы записываем значение того, что было проверено.
Следовательно, мы должны увидеть в консоли 'grape'.
Использование селектора :checked
Другой способ получить установленный переключатель - использовать селектор :checked.
Например, мы можем написать:
const selected = document.querySelector('input[name="fruit"]:checked').value;
console.log(selected)
Селектор input[name=”fruit”]:checked получает все элементы с именем атрибута, fruit и свойством checked:true.
Установленное значение в форме
Мы также можем получить установленное значение переключателя из значений формы.
Например, мы можем написать:
<form id="fruits">
<input type="radio" name="fruit" value="apple"> Apple
<input type="radio" name="fruit" value="orange"> Orange
<input type="radio" name="fruit" value="grape" checked="checked"> Grape
</form>
Затем мы получаем переключатель, который проверяется записью:
const form = document.getElementById("fruits");
console.log(form.elements["fruit"].value);
Получаем элемент формы с getElementById.
Затем мы получаем входные данные с помощью form.elements[“fruit”].
И тогда мы можем получить свойство value, чтобы получить выбранное значение.
