无法获取选中单选按钮的值？Bootstrap单选按钮取值问题

你的写法本身是有效的，出现undefined和切换后值不更新的原因如下：

1. 初始无选中项导致返回undefined #

页面加载时两个单选按钮都没有checked属性，$('input[name="heightButtonS"]:checked')找不到匹配元素，调用val()自然返回undefined。

解决：
给其中一个单选按钮添加默认选中的checked属性，比如：

<input class="form-check-input" type="radio" name="heightButtonS" role="radio" value="METER" id="h1" checked/>

2. 切换后值不更新的原因 #

你获取值的代码只在页面加载时执行了一次，没有监听单选按钮的状态变化。用户切换选项时代码不会重新执行，所以一直返回初始值。

解决：
把获取值的逻辑绑定到单选按钮的change事件上，每次切换时重新获取：

// 监听单选按钮状态变化
$('input[name="heightButtonS"]').on('change', function() {
    var heightIn = $('input[name="heightButtonS"]:checked').val();
    console.log(heightIn); // 打印当前选中的值
});

// 页面加载时获取初始选中值（可选）
var initialHeight = $('input[name="heightButtonS"]:checked').val();
console.log('初始选中值：', initialHeight);

额外注意 #

• jQuery中获取表单元素值用val()方法，value()是错误写法，原生JS DOM元素才用.value属性。
• 你的单选按钮name属性一致，保证了单选组的互斥性，这部分是正确的。

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