IE浏览器中document.forms.value返回undefined问题排查

嘿，这种老IE的兼容性坑我之前也踩过！你遇到的单选按钮在验证时返回undefined的问题，大概率是老版本IE（尤其是IE8及更早）和现代浏览器的DOM处理差异导致的，常见原因有这几个：

1. 元素获取方式踩了IE的坑 #

如果你用了document.表单名.单选按钮名这种旧的表单元素引用方式，哪怕页面里只有一个单选按钮，老IE也可能返回一个元素集合，而不是单个元素。这时候你直接去拿它的checked或者value属性，自然就得到undefined了。

比如这种写法在IE里就容易出问题：

var myRadio = document.myForm.userRadio;
alert(myRadio.checked); // 老IE里会返回undefined

解决办法也简单：

• 如果是单个单选按钮，直接用getElementById精准获取，最稳妥；
• 如果是一组单选按钮，就得遍历集合找到选中的那一个：

var radios = document.getElementsByName('userRadio');
var checkedOne;
for(var i = 0; i < radios.length; i++){
  if(radios[i].checked){
    checkedOne = radios[i];
    break;
  }
}
alert(checkedOne ? checkedOne.value : '没选中任何选项');

2. name和id重复搞乱了IE #

老IE对表单元素的name属性特别敏感，如果你的单选按钮name和页面里其他元素的id重名了，IE会把元素引用搞混，导致你获取到的不是目标单选按钮，自然返回undefined。

另外还要确认单选按钮是不是被正确包裹在<form>标签里，老IE对不在表单内的元素识别也容易出问题。

3. JS代码跑早了，DOM还没加载完 #

如果你的验证代码在页面DOM还没完全渲染好就执行了，老IE里根本找不到这个单选按钮，结果自然是undefined。

解决办法就是把代码放到window.onload事件里，或者直接把JS脚本放在</body>标签之前，确保DOM加载完成后再去获取元素：

window.onload = function(){
  // 这里写你的表单验证逻辑
}

4. 别忘了给单选按钮加value属性 #

虽然这个不会直接导致undefined，但如果你的单选按钮没设置value，老IE会返回空字符串，要是你的验证逻辑没考虑到这种情况，也可能出现类似的错误提示。所以记得给每个单选按钮都明确加上value属性。

要是你调整后的代码还是有问题，可以把代码片段贴出来，我再帮你揪出问题所在～

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