在IE 6/7上面，动态创建的单选框是无法被用户来选择的。这是一个已知的bug，并且在IE 8中被修正了。 已经有不少的资料在讨论这个问题了。对于这个问题，需要注意的是，如果要设置单选框的被选择状态（通过checked = true），需要在单选框已经被加入到DOM结构中之后来进行。
我也写了一个简单的页面来测试并修正这个问题。基本的思路是通过onclick事件来动态选择。基本的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE 7 radio</title>
<script type="text/javascript">
(function() {
function byId(id) {
return document.getElementById(id);
}
var data = [["label1", "value1"], ["label2", "value2"], ["label3", "value3"]];
var selectedRadio = null;
function buildRadios() {
var root = byId("test");
for (var i = 0; i <data.length; i++) {
var label = document.createElement("label");
label.innerHTML = data[i][0];
var radio = document.createElement("input");
radio.type = "radio";
radio.name = "test_radio";
radio.value = data[i][1];
root.appendChild(label);
root.appendChild(radio);
if (i == 0) {
radio.checked = true;
selectedRadio = radio;
}
radio.onclick = function() {
this.checked = true;
if (selectedRadio != this) {
selectedRadio.checked = false;
selectedRadio = this;
}
};
}
}
window.onload = function() {
buildRadios();
};
})();
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
分享到：
相关推荐
在这个案例中，我们将探讨如何使用jQuery来实现美化版的单选框（radio）和复选框（checkbox），创建出一种简洁而清爽的样式风格。 首先，我们要明白jQuery的基本用法。jQuery通过选择器选取DOM元素，然后应用各种...
《jQuery iCheck.js实现自定义复选框与单选框样式插件详解》 在Web开发中，我们经常需要对复选框（checkbox）和单选框（radio）进行美化和定制，以提升用户界面的视觉体验。jQuery iCheck.js是一款强大的插件，它...
在网页开发中，表单是用户与网站交互的重要组成部分，而单选框（Radio Button）则是表单中常见的一种输入控件，用于让用户在多个预设选项中选择一个。本篇文章将详细讲解如何在表单中对单选框添加和移除选项，以及...
自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。 再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变...
#### 五、动态创建单选按钮 **问题描述：** 使用`document.createElement`结合`setAttribute`方法创建单选按钮时，在IE中可能会有问题。 **解决方法：** 直接使用HTML字符串创建单选按钮： ```javascript var ...
然而，有时我们希望用户只能从这些选项中选择一个，这通常被称为单选框（Radio Button）的功能。但如果你的界面设计中只有复选框，并且希望限制用户只能选择一项，那么可以通过编程实现这一功能。以下就是如何在...
3. **表单元素**：Inspinia提供了一系列的表单控件，如输入框（input）、选择器（select）、复选框（checkbox）、单选按钮（radio）、日期选择器（date picker）等，确保表单的设计和交互符合现代Web标准。...
在动态创建表单元素时，比如使用`document.createElement()`、`appendChild()`等方法，这些新添加的元素可能不会立即被JavaScript引擎识别，尤其是在事件处理或者数据绑定时。因此，当你试图通过`innerHTML`获取这些...
在网页设计中，选择框（Select）是一种常见的表单元素，用于让用户从多个选项中进行选择。然而，当选项数量过多或者选项名称过长时，原生的HTML Select控件可能会变得难以管理和不友好，用户体验也随之下降。为了...
在网页设计和开发中，选择框（Select Box）是一种常见的用户界面组件，它允许用户从一组预定义的选项中进行选择。本文将深入探讨选择框的JavaScript操作，重点关注`<select>`元素及其相关的属性和方法。 1. **...
为了改善这一情况，许多开发者选择了使用JavaScript库，如jQuery，来创建自定义的模拟选择器。本文将详细解析"jQuery Select(单选) 模拟插件 V1.3.6"的核心功能、应用场景以及实现原理。 ### 1. 插件介绍 "jQuery ...
3. **表单(Form)**：提供了各种输入控件，如文本框、下拉框、复选框、单选框等，便于用户填写和提交数据。表单验证功能可以确保输入数据的有效性。 4. **菜单(Menu)**：用于构建多级导航菜单，使后台系统结构清晰，...
- 单选框和复选框：检查是否被选中，以及全选、多选、全不选、反选的功能实现。 - 文件类型：在文件上传时验证文件的类型。 4. 字符类： - 全字母：使用正则表达式检查字符串是否由大小写字母组成。 - 字母数字...
- 单选框选择状态验证：判断单选按钮是否被选中。 - 复选框选择状态验证：检查至少有一个复选框被选中。 - 复选框全选、多选、全不选、反选功能：通过操作选中状态实现。 4. 字符类 - 字母组成验证：使用正则...
它提供了一套统一的样式，使表单元素如选择框、复选框、单选按钮、文本输入框等在各种浏览器中保持一致的外观，提升用户体验。在本文中，我们将深入探讨jQuery Uniform的原理、安装、使用方法以及一些常见的定制技巧...
10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框...
- **3.5 判断单选框是否选择** ```javascript function isChecked(checkboxName) { var checkboxes = document.getElementsByName(checkboxName); for (var i = 0; i ; i++) { if (checkboxes[i].checked) ...
- **3.5 单选框是否被选中验证**：检查单选框是否被选中。 - **3.6 复选框是否被选中验证**：检查复选框是否被选中。 - **3.7 复选框操作**：实现复选框的全选、多选、全不选以及反选等功能。 - **3.8 文件上传...
10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框...
7. **表格和表单**: Bootstrap 3提供了预设样式的表格和表单控件，包括表头、表体样式、排序功能，以及各种输入类型的表单控件，如文本输入、选择器、复选框和单选按钮，使得数据展示和用户输入更加直观。...