IE 6/7 动态创建的单选框无法被选择

alexcheng · 发表于 2013-2-7 16:04:38

在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[0]; var radio = document.createElement("input"); radio.type = "radio"; radio.name = "test_radio"; radio.value = data[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>

		自动登录	找回密码
密码			立即注册

IE 6/7 动态创建的单选框无法被选择

浏览过的版块