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. for(var i=0;i<tableDatas.length;i++){
5. var arr=tableDatas[i];
6. // 加入复选框
7. var checkBox=document.createElement("input");
8. checkBox.setAttribute("type","checkbox");
9. checkBox.setAttribute("id",arr[0]);
10. checkBox.setAttribute("name", arr[1]);
11. var li=document.createElement("li");
12. li.appendChild(checkBox);
13. li.appendChild(document.createTextNode(arr[1]));
14. ul.appendChild(li);
15. }
16. executerDiv.appendChild(ul);
17. //by [url=http://www.jbxue.com]http://www.jbxue.com[/url]

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

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