Js动态添加复选框Checkbox

Js动态添加复选框Checkbox的实例方法!!! 

首先，使用JS动态产生Checkbox可以采用如下类似的语句： 

1. var checkBox=document.createElement("input");  
2. checkBox.setAttribute("type","checkbox");  
3. checkBox.setAttribute("id",'123456');  

但是，这样产生的checkbox是不带尾后的文字的，如果需要添加，那么需要使用 

1. document.createTextNode('XXX')  

方法来产生一个文本节点，放在checkbox后面。 

如下代码，程序产生了一个checkbox和一个文本节点，并将它们放到一个li对象中，再将li对象添加到ul对象中： 

1. var executerDiv=$("executerDiv");  
2. executerDiv.innerHTML="";  
3. var ul=document.createElement("ul");  
4.   
5. for(var i=0;i<tableDatas.length;i++){  
6. var arr=tableDatas[i];  
7.   
8. // 加入复选框  
9. var checkBox=document.createElement("input");  
10. checkBox.setAttribute("type","checkbox");  
11. checkBox.setAttribute("id",arr[0]);  
12. checkBox.setAttribute("name", arr[1]);  
13.   
14. var li=document.createElement("li");  
15. li.appendChild(checkBox);  
16. li.appendChild(document.createTextNode(arr[1]));  
17.   
18. ul.appendChild(li);  
19. }  
20.   
21. executerDiv.appendChild(ul);  
22. //by [url=http://www.jbxue.com]http://www.jbxue.com[/url]  

以上代码中，将checkbox放到li和ul中，这样能起到良好的排列效果，UL和li设置的CSS样式如下： 

1. #executerDiv{  
2. }  
3.   
4. #executerDiv ul{  
5. margin:0px;  
6. padding:0px;  
7. list-style-type:none;  
8. vertical-align:middle ;  
9. }  
10.   
11. #executerDiv li{  
12. float:left;  
13. display:block;  
14.   
15. width:100px;  
16. height:20px;  
17. line-height:20px;  
18.   
19. font-size:14px;  
20. font-weight:bold;  
21. color:#666666;  
22.   
23. text-decoration:none;  
24. text-align:left;  
25.   
26. background:#ffffff;  
27. }  

转载于:https://www.cnblogs.com/cfinder010/p/3502979.html