如何在Microsoft Edge中获取选中单选按钮的值？求跨浏览器纯JS方案

这个问题我之前也碰到过，本质是旧浏览器（比如Edge Legacy、IE）和现代浏览器对表单单选按钮组的处理逻辑差异：在Chrome这类现代浏览器里，你通过form.myRadio访问同名单选按钮时，它会自动帮你定位到当前选中的那个单选按钮，所以直接取.value就能拿到值；但在旧浏览器中，form.myRadio返回的是所有同名单选按钮的集合（HTMLCollection），集合本身没有.value属性，自然就输出undefined了。

下面给你几个跨浏览器的纯JS解决方案，按简洁度和兼容性排序：

方法1：使用querySelector直接定位选中项（推荐，兼容IE8+） #

querySelector可以通过选择器直接找到被选中的单选按钮，语法简洁且兼容性覆盖大部分场景：

function test(){
  // 定位表单内name为myRadio的选中单选按钮
  const selectedRadio = document.querySelector('#myForm input[name="myRadio"]:checked');
  // 先判断是否有选中项，避免无选中时报错
  const value = selectedRadio ? selectedRadio.value : null;
  console.log(value);
}

解释：:checked伪类会精准匹配当前处于选中状态的单选按钮，只要有单选被选中，就能直接拿到对应的DOM元素，再读取它的.value即可。如果没有任何单选被选中，selectedRadio会是null，所以加个判断避免出现报错。

方法2：遍历单选按钮集合（兼容所有浏览器，包括IE6） #

如果需要兼容极老的浏览器（比如IE6、IE7），可以通过获取所有单选按钮的集合，遍历找到选中项：

function test(){
  const form = document.getElementById("myForm");
  // 获取表单内所有name为myRadio的单选按钮集合
  const radios = form.elements.myRadio;
  let selectedValue = null;
  // 遍历集合，找到checked为true的项
  for(let i = 0; i < radios.length; i++){
    if(radios[i].checked){
      selectedValue = radios[i].value;
      break; // 找到后立即跳出循环，提升性能
    }
  }
  console.log(selectedValue);
}

解释：form.elements.myRadio会返回表单中所有name为myRadio的控件集合（这里就是单选按钮组），遍历每个元素，检查checked属性为true的那个，就是当前选中的项，读取它的.value即可。

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