在React中如何获取单选按钮组中被选中的选项？

获取单选按钮组选中值的实现方法 #

你给出的单选按钮组共用name="fav_language"，可以通过以下几种常用方式获取选中项的值： #

方法1：原生JS直接匹配选中项（推荐）

用CSS伪类:checked配合querySelector可以直接定位到选中的单选按钮，代码最简洁：

// 直接获取选中的单选按钮元素
const checkedRadio = document.querySelector('input[name="fav_language"]:checked');
if (checkedRadio) {
  // 存在选中项时读取值
  const selectedValue = checkedRadio.value;
  console.log(selectedValue); // 输出对应选中项的value：HTML/CSS/JavaScript
} else {
  // 无选中项的处理逻辑
  console.log('未选择任何选项');
}

方法2：遍历单选组筛选

如果需要兼容非常老旧的浏览器，可以遍历所有同name的单选按钮判断选中状态：

const radioList = document.getElementsByName('fav_language');
let selectedValue = '';
for (let i = 0; i < radioList.length; i++) {
  if (radioList[i].checked) {
    selectedValue = radioList[i].value;
    break;
  }
}

方法3：jQuery场景实现

如果项目使用jQuery，写法更精简：

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

常见扩展场景：监听选择变化实时取值

如果需要在用户切换选项时自动获取最新选中值，可以绑定change事件：

document.querySelectorAll('input[name="fav_language"]').forEach(radio => {
  radio.addEventListener('change', function() {
    console.log('当前选中值：', this.value);
  })
})

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