如何判断单选框选中值？附对应HTML代码示例

针对你给出的这组单选框，我整理了几个实用的方法来获取选中的值，不管是用原生JS还是jQuery都能搞定：

一、原生JavaScript方法（推荐，无需额外库） #

方法1：直接用querySelector定位选中项 #

利用CSS伪类:checked可以直接选中被勾选的单选框，再结合name属性精准定位你的这组单选框：

// 获取选中的单选框元素
const selectedRadio = document.querySelector('input[name="radio_xsdfYxsfWEx"]:checked');

// 判断是否有选中项，再输出值
if (selectedRadio) {
  console.log('当前选中的值是：', selectedRadio.value);
} else {
  console.log('还没有选中任何单选框哦');
}

方法2：遍历所有单选框找选中项 #

如果需要对每个单选框做额外判断，这种遍历的方式更灵活：

// 获取同组所有单选框
const radioGroup = document.getElementsByName('radio_xsdfYxsfWEx');
let selectedValue = null;

// 遍历找选中的那个
for (const radio of radioGroup) {
  if (radio.checked) {
    selectedValue = radio.value;
    break; // 找到后就停止遍历，提升效率
  }
}

// 输出结果
if (selectedValue) {
  console.log('当前选中的值是：', selectedValue);
} else {
  console.log('还没有选中任何单选框哦');
}

二、jQuery方法（如果你项目里已经引入了jQuery） #

用jQuery的选择器可以更简洁地获取值：

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

if (selectedValue) {
  console.log('当前选中的值是：', selectedValue);
} else {
  console.log('还没有选中任何单选框哦');
}

核心思路都是通过相同的name属性定位同一组单选框，再找到带有checked属性的选项获取它的value值～

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