jQuery获取选中单选按钮值异常的解决方法咨询

嗨，我完全懂你遇到的困扰——原生JS能正常拿到单选选中值，但换成jQuery后总是取到第一个选项的值，这确实是个容易踩的小坑！

问题出在你可能直接用了类似$('input[name="q1"]').val()这样的代码，jQuery默认会返回第一个匹配到的元素的值，而不是选中的那个。要解决这个问题，关键是加上:checked伪类来精准定位选中的单选按钮。

正确的写法示例 #

针对你提供的HTML结构，你可以用以下几种方式获取选中值：

1. 通过name属性定位+:checked

// 获取name为q1的选中单选框的值
var selectedAnswer = $('input[name="q1"]:checked').val();

2. 结合表单ID和class更精准定位

// 限定在#quiz表单内，class为mc的选中单选框
var selectedAnswer = $('#quiz .mc:checked').val();

3. 完整的使用场景示例

// 比如点击按钮时获取选中值
$('#submit-btn').click(function() {
    var selectedValue = $('#quiz input[name="q1"]:checked').val();
    if (selectedValue) {
        console.log("你选中的答案是：" + selectedValue);
    } else {
        alert("请先选择一个选项哦！");
    }
});

为什么之前的写法不对？ #

当你直接调用$('input[name="q1"]').val()时，jQuery会遍历所有匹配的元素，然后返回第一个元素的value属性值，不管它是否被选中。加上:checked伪类后，就只会筛选出当前处于选中状态的单选按钮，这时候再调用.val()就能拿到正确的选中值了。

内容的提问来源于stack exchange，提问作者Diego