jquery获取单选按钮选中的值

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

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

方法一：使用 :checked 选择器

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() 监听单选按钮组的变化。
• 事件触发时直接获取当前选中按钮的值。

注意事项

1. 确保单选按钮的 name 属性一致，形成互斥组。
2. 若未选中任何按钮，$('input[name="radioName"]:checked').val() 返回 undefined。
3. 动态生成的单选按钮需使用事件委托监听：

   $(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>