DevGang
Авторизоваться

Как получить значение выбранной радиокнопки с помощью 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, чтобы получить выбранное значение.

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить