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

最新推荐文章于 2022-07-21 15:45:36 发布

成富

最新推荐文章于 2022-07-21 15:45:36 发布

阅读量115

点赞数

分类专栏： Web 2.0 文章标签： IE JavaScript XHTML HTML ViewUI

Web 2.0 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在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>

成富

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE 6/7 动态创建的单选框无法被选择

在IE 6/7上面，动态创建的单选框是无法被用户来选择的。这是一个已知的bug，并且在IE 8中被修正了。已经有不少的资料在讨论这个问题了。对于这个问题，需要注意的是，如果要设置单选框的被选择状态（通过checked = true），需要在单选框已经被加入到DOM结构中之后来进行。我也写了一个简单的页面来测试并修正这个问题。基本的思路是通过onclick事件来动态选择。基本的代码如下： ...
复制链接

扫一扫