如何用jQuery判断Bootstrap 4模态框表单中的选中单选按钮

嘿，我太懂这种“明明应该很简单却卡壳”的感觉了！我帮你梳理下怎么快速找出模态框里选中的单选按钮，顺便避避常见的坑～

首先先确认你的单选按钮组的核心规则：同组单选按钮的name属性必须完全一致，从你给的代码看，name="customRadioInline3"是对的，这点没问题。接下来分两种常用方法来获取选中值：

方法1：原生JavaScript #

直接利用CSS选择器找到选中的单选按钮，再提取它的value：

// 务必在模态框已经显示之后执行这段代码
const selectedRadio = document.querySelector('input[name="customRadioInline3"]:checked');
if (selectedRadio) {
  console.log('选中的值是：', selectedRadio.value);
} else {
  console.log('没有选中任何选项');
}

方法2：jQuery（Bootstrap 4常用） #

如果你的项目用了jQuery，代码会更简洁：

// 同样要在模态框显示完成后执行
const selectedVal = $('input[name="customRadioInline3"]:checked').val();
console.log('选中的值是：', selectedVal); // 如果没选中会返回undefined

关键注意点！很多人栽在这里 #

模态框是动态渲染的（默认隐藏在DOM里，显示时才激活），所以不要在页面刚加载时就去获取单选按钮，这时候元素可能还没处于可访问状态。你需要绑定Bootstrap模态框的shown.bs.modal事件，确保在模态框完全显示后再操作：

// 把#yourModalId换成你自己的模态框ID
$('#yourModalId').on('shown.bs.modal', function() {
  // 在这里写获取选中值的代码
  const selectedVal = $('input[name="customRadioInline3"]:checked').val();
  console.log('当前选中的单选按钮值：', selectedVal);
});

额外排查点 #

如果还是不行，检查这两个地方：

• 有没有其他JS代码意外修改了单选按钮的checked状态？
• 单选按钮的disabled属性是不是被设置成true了？禁用的单选按钮没法被选中哦。

附你提供的HTML代码整理版：

<div class="card-body">
  <div class="custom-control custom-radio">
    <input type="radio" id="tdeeActivitySedentary" name="customRadioInline3" class="custom-control-input" value="1.2">
    <label class="custom-control-label" for="tdeeActivitySedentary">久坐不动（示例标签）</label>
  </div>
  <!-- 其他同组的单选按钮也应该保持name="customRadioInline3" -->
</div>

内容的提问来源于stack exchange，提问作者J.G.Sable