`

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

阅读更多
开发过程中,需要使用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()方法来获取。
 
 


分享到:
评论

相关推荐

    Radio 单选JS动态添加的选项onchange事件无效的解决方法

    这个问题常常出现在使用JavaScript动态向页面中添加单选按钮(radio)时,为这些动态添加的单选按钮绑定的onchange事件无法正常触发。描述中提到,通过使用delegate()函数可以有效解决此类问题。 在了解如何解决...

    elementUi vue el-radio 监听选中变化的实例代码

    首先,el-radio 组件的使用通常需要与 el-radio-group 组合使用,因为 el-radio-group 可以管理一组 el-radio 的状态。在 el-radio-group 中,可以使用 v-model 指令绑定当前选中的值,并通过 @change 事件来监听值...

    Koo.js-标签式表单验证及初始化插件及演示支持select,checkbox,radio.zip

    Koo.js是一个专门针对这一需求设计的JavaScript插件,它提供了标签式的表单验证功能,并且对select、checkbox、radio等元素提供了良好的支持。下面我们将深入探讨Koo.js的核心特性和使用方法。 一、Koo.js简介 Koo...

    网页编程JAVASCRIPT实例代码

    网页编程是构建动态交互式网站的关键技术之一,其中JavaScript扮演着至关重要的角色。在这个实例代码集合中,我们可以通过分析每个文件来深入理解JavaScript在网页开发中的应用,以及它与HTML的紧密协作。以下是对...

    自定义 input radio 兼容ie6

    3. **JavaScript**:使用JavaScript或jQuery监听`click`事件,当radio按钮被选中或取消选中时,更改`.custom-radio`的样式。在IE6下,这将是我们改变样式的唯一方式。 ```javascript // 使用原生JavaScript var ...

    基于jQuery和layui的form表单自定义js动态生成

    在前端开发中,动态生成表单是一个常见的需求,特别是在数据录入、编辑或验证场景下。本教程将聚焦于如何利用jQuery和layui库来实现这样的功能。jQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画...

    javascript实现的动态添加表单元素input,button等(appendChild)

    以下将详细介绍如何使用JavaScript动态添加表单元素,特别是`input`和`button`,以及如何利用`appendChild`方法。 首先,我们需要了解`document.createElement`函数。这个函数用于在内存中创建一个新的HTML元素。...

    checkbox与radio好看的样式

    例如,可以通过 JavaScript 监听 `change` 事件来动态更新关联的标签内容,或者使用 `addEventListener` 添加自定义行为。 4. **图片资源** "images" 目录可能包含用于自定义样式的图像资源,如选中状态的图标。...

    layui-v2.5.4-商品规格页面.zip

    使用`layui.each()`遍历规格选项,`layui.form.on('radio/checkbox')`监听用户的选择,然后通过Ajax向后端请求数据,更新页面上的价格和库存展示。 五、layui组件的应用 layui的组件如`laypage`(分页)、`laydate...

    tab切换纯js,select,radio,切换

    本文将详细讲解如何使用纯JavaScript实现Tab切换,以及与之相关的`select`选择器和`radio`单选按钮的切换。 首先,我们来理解Tab切换的基本概念。在HTML结构中,通常会有几个包含不同内容的`div`元素,它们被隐藏或...

    radio关联 网页设计

    综上所述,通过合理的HTML结构设计与JavaScript逻辑编写,我们可以轻松实现`&lt;input type="radio"&gt;`之间的关联,并根据用户的选择动态调整页面内容的显示方式。这种技术在实际项目开发中非常有用,值得深入学习和掌握...

    宽度自适应的按钮。button,方便实用

    在网页设计和开发中,按钮(Button)是用户界面中不可或缺的元素,它通常用于触发某种操作或导航至其他页面。"宽度自适应的按钮"是现代网页设计的一个重要特性,这种按钮能够根据其内容或者容器的宽度自动调整大小,...

    简单美观的选择题在线答题js代码

    - **动画效果**:为了增加用户体验,可能会使用JavaScript添加过渡效果,如平滑地切换题目,使得答题过程更加流畅。 4. **响应式设计**: "自适应浏览器宽度"意味着此系统利用CSS的媒体查询或JavaScript动态计算...

    判断radio是否被选中

    #### 一、ASP与JavaScript结合使用 **知识点概述:** 本文档涉及了如何在ASP(Active Server Pages)中利用JavaScript来实现对表单中`&lt;input type="radio"&gt;`控件的选择状态进行检测的功能。通过这种方式,可以在用户...

    div仿radio插件

    1. **初始化**:在页面加载后,可以通过调用插件方法来初始化div仿radio插件,为页面上的特定div元素赋予radio功能。初始化过程中,插件会根据预设的配置项来设置样式和行为。 2. **传值**:模拟radio的选中状态,...

    radio-reset-controller:没有javascript的可重用状态机组件

    通过使用`radio-reset-controller`,开发者可以轻松地在项目中添加复位功能,而无需编写大量的JavaScript代码。这对于那些注重性能和简洁性的项目来说,无疑是一种很好的解决方案。同时,这种纯HTML实现的组件也更...

    动态添加标签的导航栏

    本文将深入探讨如何使用`HorizontalScrollView`来实现动态添加`RadioButton`,从而创建一个可自定义的、灵活的导航栏。 首先,我们要理解`HorizontalScrollView`这个组件。`HorizontalScrollView`是Android提供的一...

Global site tag (gtag.js) - Google Analytics