`

解决通过createElement创建出来的radio无法选中的问题

阅读更多

开发过程中,需要使用JS向页面动态添加radio,实现时通过document.createElement()方法来实现,刚开始的代码如下:

 

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浏览器上生成的raido无法选中,而使用firefox浏览器却可以选中。后来试了下面的代码:

 

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);

 

结果在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()方法来获取。

 

 

 

 

分享到:
评论

相关推荐

    ajax实现下拉列表改变时动态创建单选按钮

    `&lt;input type="radio"&gt;`和`&lt;label&gt;`的关联是通过`for`属性和`id`属性实现的,这样用户点击`&lt;label&gt;`时,相应的单选按钮会被选中。 最后,关于“Error: Access is denied.”,这通常是由于跨域限制导致的。由于Ajax...

    【JavaScript源代码】js实现添加删除表格操作.docx

    当用户勾选某个复选框并点击“删除”按钮时,JavaScript将遍历表格,查找所有被选中的行(通过检查复选框的checked属性)。找到后,这些行会被从DOM中移除,同时全选复选框的状态也会被更新为未选中。 3. **全选/全...

    Javascript高级表格操作

    例如,可以使用`document.createElement()`方法创建元素,然后通过`innerHTML`或`appendChild()`将它们添加到DOM中。这样,我们就能根据需求在运行时动态地生成表格。 接着,实现表格间隔行颜色,可以通过CSS来完成...

    表单中单选框添加选项和移除选项

    使用`document.createElement('option')`创建一个新的`&lt;option&gt;`元素,然后设置其文本和值,最后通过`appendChild`将其添加到选择框中。 ```javascript var select = document.forms[0].elements['location']; ...

    轻松学习javascript

    console.log("选中了:" + radios[i].value); } } } // HTML &lt;input type="radio" name="gender" value="male" checked&gt; 男 &lt;input type="radio" name="gender" value="female"&gt; 女 ()"&gt;检查选择 ``` ####...

    JQuery中$之选择器用法介绍

    在jQuery中,直接使用`$("input[name='metaId']").val()`可能无法获取到被选中的Radio按钮的值,因为它返回的是第一项的值。要获取被选中的Radio按钮的值,可以使用以下两种方法: - `$("input[name='metaId']:...

    js宝典学习笔记,记录JAVA SCRIPT宝典中的内容

    可以使用 `document.createElement()` 和 `document.createTextNode()` 来创建新的DOM元素和文本节点。 ```javascript var elem = document.createElement("div"); var text = document.createTextNode("新文本"); ...

    js常用经验总结

    ### JavaScript 常用经验总结 #### 一、概述 JavaScript 是一种广泛应用于网页...熟练掌握这些知识点不仅能够提高编程效率,还能帮助开发者更好地理解和解决实际问题。希望这些内容能对你学习 JavaScript 有所帮助。

    JavaScript多图片上传案例

    首先,HTML部分提供了一个简单的表单结构,包括两个单选按钮(`&lt;input type="radio"&gt;`),一个用于表示“无图片”(默认选中),另一个表示“有图片”。当用户选择“有图片”选项时,一个文本输入框(`...

    input中id和name属性的区别示例介绍

    4. **动态创建元素时的Name属性设置**:在使用JavaScript动态创建带有Name属性的HTML元素时,不能直接使用element.name=""来添加Name属性,而必须在创建元素时使用document.createElement('&lt;element name="myName"&gt;...

    javascript中的小技巧

    可以使用`document.createElement()`和`document.createTextNode()`创建新的DOM元素和文本节点。 **示例:** ```javascript let p = document.createElement("p"); let text = document.createTextNode("This is ...

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    Jquary函数大全

    - **功能**:为选中的元素添加一个或多个类。 - **示例**: ```javascript $("p").addClass("css-style"); ``` #### 设置属性 `attr` - **语法**:`$(selector).attr("attribute", "value")` - **功能**:设置被...

    HTML-DOM对象

    - `createElement()`:创建一个新的元素节点。 - `createTextNode()`:创建一个新的文本节点。 **1.4 描述** `Document`对象是DOM的核心部分,用于表示整个HTML文档。通过这个对象,可以访问文档中的所有元素和属性...

Global site tag (gtag.js) - Google Analytics