当前位置：首页 > jquery

jquery获取单选按钮选中的值

2026-02-04 09:12:46jquery

使用 jQuery 获取单选按钮选中的值

通过 jQuery 获取单选按钮（radio button）选中的值，可以采用以下方法：

jquery获取单选按钮选中的值

方法一：使用 :checked 选择器

jquery获取单选按钮选中的值

var selectedValue = $('input[name="radioName"]:checked').val();

input[name="radioName"] 选中所有名为 radioName 的单选按钮。
:checked 过滤出当前选中的单选按钮。
.val() 获取选中按钮的 value 属性值。

方法二：遍历单选按钮组

var selectedValue;
$('input[name="radioName"]').each(function() {
    if ($(this).is(':checked')) {
        selectedValue = $(this).val();
    }
});

通过 .each() 遍历所有同名单选按钮。
使用 .is(':checked') 判断是否选中。

方法三：事件监听

$('input[name="radioName"]').change(function() {
    var selectedValue = $(this).val();
    console.log(selectedValue);
});

通过 .change() 监听单选按钮组的变化。
事件触发时直接获取当前选中按钮的值。

注意事项

确保单选按钮的 name 属性一致，形成互斥组。
若未选中任何按钮，$('input[name="radioName"]:checked').val() 返回 undefined。

动态生成的单选按钮需使用事件委托监听：

$(document).on('change', 'input[name="radioName"]', function() {
    var selectedValue = $(this).val();
});

完整示例

<form>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
</form>
<script>
    $(document).ready(function() {
        $('input[name="gender"]').change(function() {
            alert($('input[name="gender"]:checked').val());
        });
    });
</script>