当前位置：首页 > jquery

jquery获取单选按钮选中的值

2026-03-17 06:21:47jquery

获取单选按钮选中的值

使用jQuery获取单选按钮（radio button）选中的值可以通过以下几种方法实现：

方法一：使用:checked选择器和.val()方法

jquery获取单选按钮选中的值

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

radioGroupName是单选按钮组的name属性值。
:checked选择器用于筛选出当前选中的单选按钮。
.val()方法获取选中按钮的value属性值。

方法二：遍历单选按钮组

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

使用.each()遍历所有同名单选按钮。
.is(':checked')检查当前按钮是否被选中。

方法三：直接获取选中状态

jquery获取单选按钮选中的值

var selectedValue = $('input[name="radioGroupName"]:checked').attr('value');

通过:checked筛选后，用.attr('value')获取值。

注意事项

确保单选按钮组共享相同的name属性。
若未选中任何按钮，上述方法会返回undefined，需做判空处理。

完整示例

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<button id="checkBtn">Get Value</button>

<script>
$('#checkBtn').click(function() {
    var gender = $('input[name="gender"]:checked').val();
    alert(gender || "No option selected");
});
</script>