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

Правильный способ получения выбранной радиокнопки через jQuery

Ваш код в целом верен, но есть несколько нюансов, которые могут вызывать ошибки. Давайте разберёмся по порядку.

Основное решение

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="radio" name="gender" value="male"> Мужской
    <input type="radio" name="gender" value="female"> Женский
    <button id="submit">Узнать результат</button>

    <script>
    $(document).ready(function() {
        $('#submit').on('click', function() {
            // Основной способ - получаем значение выбранной радиокнопки
            var selectedValue = $('input[name="gender"]:checked').val();
            
            if (selectedValue) {
                console.log('Выбранное значение:', selectedValue);
                alert('Вы выбрали: ' + selectedValue);
            } else {
                console.log('Ничего не выбрано');
                alert('Пожалуйста, выберите пол');
            }
        });
    });
    </script>
</body>
</html>

Почему ваш код может выдавать undefined?

Есть несколько причин:

• Скрипт выполняется до загрузки DOM — если ваш jQuery-код находится до объявления радиокнопок, селектор не найдёт элементы. Решение: оборачивайте код в $(document).ready().
• Неправильный селектор — если у кнопок нет атрибута name или он отличается от "gender", селектор не сработает.
• Отсутствие выбранной кнопки — если ни одна радиокнопка не отмечена, :checked вернёт пустой jQuery-объект, и .val() вернёт undefined.

Как получить текст рядом с радиокнопкой

Чтобы получить не только значение value, но и текст (например, "Мужской"), можно использовать следующий подход:

$('#submit').on('click', function() {
    var selectedRadio = $('input[name="gender"]:checked');
    
    if (selectedRadio.length > 0) {
        // Получаем значение value
        var value = selectedRadio.val();
        
        // Получаем текст рядом с кнопкой (через соседний узел или label)
        var labelText = selectedRadio.next('label').text() || 
                        selectedRadio.parent().text().trim() || 
                        selectedRadio.closest('label').text();
        
        console.log('Value:', value);
        console.log('Label text:', labelText);
    }
});

Альтернативные способы получения значения

Вот несколько вариантов, которые могут быть полезны в разных ситуациях:

// Способ 1: через фильтр :checked
var val1 = $('input:radio[name="gender"]:checked').val();

// Способ 2: через each() для обработки всех групп
$('input[type="radio"]').each(function() {
    if ($(this).is(':checked')) {
        console.log('Выбрано:', $(this).val());
    }
});

// Способ 3: через сериализацию формы (если кнопки внутри <form>)
var val3 = $('form').find('input[name="gender"]:checked').val();

Работа с несколькими группами радиокнопок

Если на странице несколько групп радиокнопок, используйте универсальный обработчик:

$('input[type="radio"]').on('change', function() {
    var groupName = $(this).attr('name');
    var selectedValue = $('input[name="' + groupName + '"]:checked').val();
    console.log('Группа ' + groupName + ':', selectedValue);
});

Главное правило: всегда проверяйте, что элемент найден (длина jQuery-объекта больше 0), прежде чем вызывать .val(). И не забывайте оборачивать код в $(document).ready().

// Получение выбранной радиокнопки без jQuery
document.getElementById('submit').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;
        }
    }
    
    if (selectedValue) {
        console.log('Выбрано:', selectedValue);
    } else {
        console.log('Ничего не выбрано');
    }
});

document.getElementById('submit').addEventListener('click', function() {
    var selected = document.querySelector('input[name="gender"]:checked');
    
    if (selected) {
        console.log('Выбрано:', selected.value);
    } else {
        console.log('Ничего не выбрано');
    }
});