IE 6/7 動態創建的單選框無法被選擇

在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>
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章