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