如何在不使用jQuery的情况下获取单选按钮组中选中项的ID？

当然可以！完全不用依赖jQuery，原生JavaScript就能轻松搞定这个需求。下面给你两种常用的实现方式：

方法一：使用document.querySelector（推荐） #

这种方法最简洁，利用CSS选择器直接定位到被选中的单选按钮：

// 定位到name为"fruit"且被选中的单选按钮
const selectedRadio = document.querySelector('input[name="fruit"]:checked');

// 先判断是否有选中项，避免报错
if (selectedRadio) {
  const selectedId = selectedRadio.id;
  console.log("选中的ID是：", selectedId); // 比如输出"apple"或"pear"
} else {
  console.log("还没有选中任何水果哦");
}

方法二：遍历单选按钮组（兼容旧浏览器） #

如果需要兼容一些不支持querySelector的旧浏览器，可以先获取同组的所有单选按钮，再遍历找到被选中的那个：

// 获取所有name为"fruit"的单选按钮
const radioGroup = document.getElementsByName('fruit');
let selectedId = null;

// 遍历组内的每个单选按钮
for (let i = 0; i < radioGroup.length; i++) {
  if (radioGroup[i].checked) {
    selectedId = radioGroup[i].id;
    break; // 找到选中项后直接跳出循环，提升效率
  }
}

// 输出结果
if (selectedId) {
  console.log("选中的ID是：", selectedId);
} else {
  console.log("未选中任何选项");
}

小提醒 #

• 一定要先判断是否存在选中的元素，否则当用户没选任何选项时，尝试访问id属性会导致报错。
• 确保代码在DOM加载完成后执行：你可以把脚本放在页面的</body>标签之前，或者通过DOMContentLoaded事件监听来触发代码。

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