Ajax radio button bug

在一个项目里需要用JavaScript动态建立radio buttons，然后替换span element下的内容，在IE里能显示出来，可就是无法做选择，郁闷了半天，后来查网上资料发现是IE的BUG，说是 "IE doesn’t allow the name attribute to be changed after the element is created“，可我试了下Checkbox就不存在此问题。

原代码：

Java代码

1. function createCxtjRadioButtons(data,cxtjId,cxtjTagId){
2. var tagCxtj = document.getElementById(cxtjTagId);
3. tagCxtj.removeChild(tagCxtj.childNodes[0]);
4. for (var key in data) {
5. var val = data[key];
6. var input = document.createElement("input");
7. input.setAttribute("name",cxtjId);
8. input.setAttribute("type","radio");
9. input.setAttribute("value",key);
10. tagCxtj.appendChild(input);
11. var label = document.createElement("label");
12. label.setAttribute("for",input_id);
13. label.appendChild(document.createTextNode(val));
14. tagCxtj.appendChild(label);
15. }
16. }

function createCxtjRadioButtons(data,cxtjId,cxtjTagId){     var tagCxtj = document.getElementById(cxtjTagId);     tagCxtj.removeChild(tagCxtj.childNodes[0]);     for (var key in data) {       var val = data[key];       var input = document.createElement("input");       input.setAttribute("name",cxtjId);       input.setAttribute("type","radio");       input.setAttribute("value",key);       tagCxtj.appendChild(input);       var label = document.createElement("label");       label.setAttribute("for",input_id);       label.appendChild(document.createTextNode(val));          tagCxtj.appendChild(label);      }     } 

解决后：

Java代码

1. function createCxtjRadioButtons(data,cxtjId,cxtjTagId){
2. var tagCxtj = document.getElementById(cxtjTagId);
3. tagCxtj.removeChild(tagCxtj.childNodes[0]);
4. for (var key in data) {
5. var val = data[key];
6. var input = createElement("input", cxtjId);
7. input.setAttribute("type","radio");
8. input.setAttribute("value",key);
9. tagCxtj.appendChild(input);
10. var label = document.createElement("label");
11. label.setAttribute("for",input_id);
12. label.appendChild(document.createTextNode(val));
13. tagCxtj.appendChild(label);
14. }
15. }
16. 
    
17. function createElement(type, name) {
18. var element = null;
19. 
    
20. try {
21. // First try the IE way; if this fails then use the standard way
22. element = document.createElement('<'+type+' name="'+name+'">');
23. } catch (e) {
24. // Probably failed because we’re not running on IE
25. }
26. if (!element) {
27. element = document.createElement(type);
28. element.name = name;
29. }
30. return element;
31. }

function createCxtjRadioButtons(data,cxtjId,cxtjTagId){     var tagCxtj = document.getElementById(cxtjTagId);     tagCxtj.removeChild(tagCxtj.childNodes[0]);     for (var key in data) {       var val = data[key];       var input = createElement("input", cxtjId);        input.setAttribute("type","radio");       input.setAttribute("value",key);       tagCxtj.appendChild(input);       var label = document.createElement("label");       label.setAttribute("for",input_id);       label.appendChild(document.createTextNode(val));          tagCxtj.appendChild(label);      }     }  function createElement(type, name) {    var element = null;     try {       // First try the IE way; if this fails then use the standard way       element = document.createElement('<'+type+' name="'+name+'">');    } catch (e) {       // Probably failed because we’re not running on IE    }    if (!element) {       element = document.createElement(type);       element.name = name;    }    return element; }    

参考：
1、http://www.thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/
2、http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/