BUG描述: IE经常发现一些奇葩的明明是规范的东西却明显不支持等各种奇葩问题,所以使用时要十分小心,最近的做到垃圾项目由于要求兼容IE,发现了一个奇葩的bug,现在分析出来,以及解决方案
<input type="checkbox" name="dataCheck" value="1"/>
<input type="checkbox" name="dataCheck" value="2"/>
<input type="checkbox" name="dataCheck" value="3"/>
var obj = document.getElementsByName("dataCheck"); for(k in obj){ if(obj[k].checked){
alert(obj[k].value);
}
}
按道理说上面这份代码应该能获取到选择的checkbox才对,我在chrome 和 firefox测试全部真正运行能获取到选中的checkbox的值然而在IE,却发现一个很奇葩的事情,IE9一下根本进不了for in循环,IE11以下进入for in循环后无法通过checked属性判断哪个被选中了,换了jquery对象判断依旧不行,查了下IE低版本不支持forEach()这个ES5的标准
解决方案:为了确保在不同浏览器的兼容性,开发过程编写前端代码应该使用最基本的遍历数组的方式,或者使用已经封装好的工具(比如成熟的jq库进行里面的each方法进行遍历)
for(var i = 1; i <= obj.length; i += 1){ if(obj[i-1].checked){
alert(obj[k].value);
}
}
备注:批量多选,弹窗显示选择内容。 批量复选,点击开新窗口显示选择内容列表,并打印。
相关项目会用到此处js知识。