当前位置：首页 > jquery

jquery获取单选框选中的值

2026-03-17 09:00:08jquery

使用 jQuery 获取单选框选中的值

通过 jQuery 可以轻松获取单选框（radio button）选中的值。以下是几种常见方法：

方法一：使用 `:checked` 选择器

通过 :checked 选择器获取选中的单选框，再调用 .val() 方法获取其值。

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

radioName 是单选框的 name 属性值。
如果没有选中任何单选框，selectedValue 将为 undefined。

方法二：结合 `change` 事件监听

可以在单选框状态变化时获取选中的值。

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

此方法会在用户切换单选框时触发，实时获取当前选中的值。

方法三：检查默认选中的值

如果单选框设置了默认选中项（checked 属性），可以直接获取其值。

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

适用于需要初始化时获取默认值的场景。

注意事项

确保单选框的 name 属性一致，否则无法正确分组。
如果未选中任何单选框，调用 .val() 会返回 undefined，建议先检查选中状态。

示例代码

以下是一个完整的示例：

jquery获取单选框选中的值

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other

<button id="getValue">Get Selected Value</button>

<script>
$('#getValue').click(function() {
    var selectedValue = $('input[name="gender"]:checked').val();
    if (selectedValue) {
        alert("Selected: " + selectedValue);
    } else {
        alert("No option selected");
    }
});
</script>