开发过程中,需要使用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()方法来获取。
分享到:
相关推荐
这个问题常常出现在使用JavaScript动态向页面中添加单选按钮(radio)时,为这些动态添加的单选按钮绑定的onchange事件无法正常触发。描述中提到,通过使用delegate()函数可以有效解决此类问题。 在了解如何解决...
首先,el-radio 组件的使用通常需要与 el-radio-group 组合使用,因为 el-radio-group 可以管理一组 el-radio 的状态。在 el-radio-group 中,可以使用 v-model 指令绑定当前选中的值,并通过 @change 事件来监听值...
Koo.js是一个专门针对这一需求设计的JavaScript插件,它提供了标签式的表单验证功能,并且对select、checkbox、radio等元素提供了良好的支持。下面我们将深入探讨Koo.js的核心特性和使用方法。 一、Koo.js简介 Koo...
网页编程是构建动态交互式网站的关键技术之一,其中JavaScript扮演着至关重要的角色。在这个实例代码集合中,我们可以通过分析每个文件来深入理解JavaScript在网页开发中的应用,以及它与HTML的紧密协作。以下是对...
3. **JavaScript**:使用JavaScript或jQuery监听`click`事件,当radio按钮被选中或取消选中时,更改`.custom-radio`的样式。在IE6下,这将是我们改变样式的唯一方式。 ```javascript // 使用原生JavaScript var ...
在前端开发中,动态生成表单是一个常见的需求,特别是在数据录入、编辑或验证场景下。本教程将聚焦于如何利用jQuery和layui库来实现这样的功能。jQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画...
以下将详细介绍如何使用JavaScript动态添加表单元素,特别是`input`和`button`,以及如何利用`appendChild`方法。 首先,我们需要了解`document.createElement`函数。这个函数用于在内存中创建一个新的HTML元素。...
例如,可以通过 JavaScript 监听 `change` 事件来动态更新关联的标签内容,或者使用 `addEventListener` 添加自定义行为。 4. **图片资源** "images" 目录可能包含用于自定义样式的图像资源,如选中状态的图标。...
使用`layui.each()`遍历规格选项,`layui.form.on('radio/checkbox')`监听用户的选择,然后通过Ajax向后端请求数据,更新页面上的价格和库存展示。 五、layui组件的应用 layui的组件如`laypage`(分页)、`laydate...
本文将详细讲解如何使用纯JavaScript实现Tab切换,以及与之相关的`select`选择器和`radio`单选按钮的切换。 首先,我们来理解Tab切换的基本概念。在HTML结构中,通常会有几个包含不同内容的`div`元素,它们被隐藏或...
综上所述,通过合理的HTML结构设计与JavaScript逻辑编写,我们可以轻松实现`<input type="radio">`之间的关联,并根据用户的选择动态调整页面内容的显示方式。这种技术在实际项目开发中非常有用,值得深入学习和掌握...
在网页设计和开发中,按钮(Button)是用户界面中不可或缺的元素,它通常用于触发某种操作或导航至其他页面。"宽度自适应的按钮"是现代网页设计的一个重要特性,这种按钮能够根据其内容或者容器的宽度自动调整大小,...
- **动画效果**:为了增加用户体验,可能会使用JavaScript添加过渡效果,如平滑地切换题目,使得答题过程更加流畅。 4. **响应式设计**: "自适应浏览器宽度"意味着此系统利用CSS的媒体查询或JavaScript动态计算...
#### 一、ASP与JavaScript结合使用 **知识点概述:** 本文档涉及了如何在ASP(Active Server Pages)中利用JavaScript来实现对表单中`<input type="radio">`控件的选择状态进行检测的功能。通过这种方式,可以在用户...
1. **初始化**:在页面加载后,可以通过调用插件方法来初始化div仿radio插件,为页面上的特定div元素赋予radio功能。初始化过程中,插件会根据预设的配置项来设置样式和行为。 2. **传值**:模拟radio的选中状态,...
通过使用`radio-reset-controller`,开发者可以轻松地在项目中添加复位功能,而无需编写大量的JavaScript代码。这对于那些注重性能和简洁性的项目来说,无疑是一种很好的解决方案。同时,这种纯HTML实现的组件也更...
本文将深入探讨如何使用`HorizontalScrollView`来实现动态添加`RadioButton`,从而创建一个可自定义的、灵活的导航栏。 首先,我们要理解`HorizontalScrollView`这个组件。`HorizontalScrollView`是Android提供的一...