Как узнать, какая радио-кнопка выбрана с помощью jQuery?

Проблема: почему ваш код не работает

Ваш код $('input[type=radio]').val() всегда возвращает значение первого элемента в коллекции, а не выбранного. Селектор $('input[type=radio]') находит все три радио-кнопки, а метод .val() берёт значение только первого элемента. Чтобы получить значение выбранной кнопки, нужно сначала отфильтровать только те, у которых атрибут checked равен true.

Правильное решение с использованием jQuery

Самый простой и надёжный способ — использовать селектор :checked в комбинации с атрибутом name:

$('#submitBtn').click(function() {
  var selectedValue = $('input[name="gender"]:checked').val();
  if (selectedValue) {
    console.log('Выбрано значение:', selectedValue);
  } else {
    console.log('Ничего не выбрано');
  }
});

Разберём по шагам:

• $('input[name="gender"]') — находит все инпуты с именем "gender" (ваша группа радио-кнопок).
• :checked — псевдоселектор, который оставляет только выбранный элемент.
• .val() — получает значение этого элемента.

Альтернативные подходы

Если вы предпочитаете более явный стиль, можно использовать метод .prop() для проверки свойства checked:

$('#submitBtn').click(function() {
  var selectedValue;
  $('input[name="gender"]').each(function() {
    if ($(this).prop('checked')) {
      selectedValue = $(this).val();
      return false; // прерываем цикл
    }
  });
  console.log(selectedValue || 'Ничего не выбрано');
});

Или более современный вариант с использованием .filter():

$('#submitBtn').click(function() {
  var selectedValue = $('input[name="gender"]').filter(':checked').val();
  console.log(selectedValue || 'Ничего не выбрано');
});

Важные замечания

• Всегда проверяйте, выбран ли вообще какой-то вариант, чтобы избежать undefined.
• Если у вас несколько групп радио-кнопок, обязательно уточняйте селектор по атрибуту name.
• Метод .val() на пустой коллекции (когда ничего не выбрано) вернёт undefined.

Теперь ваш код будет работать корректно и выводить именно то значение, которое выбрал пользователь!

document.getElementById('submitBtn').addEventListener('click', function() {
  var radios = document.getElementsByName('gender');
  var selectedValue = null;
  
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      selectedValue = radios[i].value;
      break;
    }
  }
  
  console.log(selectedValue || 'Ничего не выбрано');
});

document.getElementById('submitBtn').addEventListener('click', () => {
  const selected = document.querySelector('input[name="gender"]:checked');
  console.log(selected ? selected.value : 'Ничего не выбрано');
});