Js动态添加复选框Checkbox

2022-11-06 12:42:22

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. }
上一篇：就publish/subscribe功能看redis集群模式下的队列技术（一）


下一篇：原生js动态添加style，添加样式