js---使用JS向页面动态添加radio

最新推荐文章于 2023-07-19 19:42:01 发布

z466459262

最新推荐文章于 2023-07-19 19:42:01 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： java_web 文章标签： IE 浏览器 Firefox

本文链接：https://blog.youkuaiyun.com/z466459262/article/details/83813523

java_web 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了在开发中遇到的使用JavaScript动态添加radio元素时，IE和Firefox浏览器表现不一致的问题。通过对比和测试，发现IE需要使用`document.createElement("<input type='radio' name='_radio'>")`来创建可选中的radio，而Firefox则适用`document.createElement("input")`并设置`type`和`name`属性。为了解决浏览器兼容性，文章提供了通过判断`document.uniqueID`属性来区分IE和其他浏览器的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[code]
开发过程中，需要使用JS向页面动态添加radio，实现时通过document.createElement()方法来实现，刚开始的代码如下：
1. var _radio = document.createElement("input");
2. _radio.type = "radio";
3. _radio.name = "_radio";
4. document.body.appendChild(_radio);
5. _radio = document.createElement("input");
6. _radio.type = "radio";
7. _radio.name = "_radio";
8. document.body.appendChild(_radio);
结果在IE浏览器上生成的raido无法选中，而使用firefox浏览器却可以选中。后来试了下面的代码：
1. var _radio = document.createElement("<input type='radio' name='_radio'>");
2. document.body.appendChild(_radio);
3. _radio = document.createElement("<input type='radio' name='_radio'>");
4. document.body.appendChild(_radio);
结果在IE上生成的radio可以选中了，但firefox浏览器中却无效。为此，对于不同的浏览器，需要使用不同的方式来生成radio，这个可以通过判断document是否具有uniqueID属性实现，因为uniqueID是IE特有的属性，为此可以通过下面代码来做到浏览器的兼容性：
# if(document.uniqueID) {
# //IE浏览器分支
# var _radio = document.createElement("<input type='radio' name='_radio'>");
# document.body.appendChild(_radio);
# _radio = document.createElement("<input type='radio' name='_radio'>");
# document.body.appendChild(_radio);
# } else {
# //非IE浏览器分支
# var _radio = document.createElement("input");
# _radio.type = "radio";
# _radio.name = "_radio";
# document.body.appendChild(_radio);
# _radio = document.createElement("input");
# _radio.type = "radio";
# _radio.name = "_radio";
# document.body.appendChild(_radio);
# }
此外，在IE浏览中，通过document.createElement("input")来生成的radio和checkbox都无法通过document.getElementsByName()方法来获取。

[/code]