星空网 > 软件开发 > Java

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. }  



 



原标题:Js动态添加复选框Checkbox的实例方法!!!

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

鼎城国际物流:https://www.goluckyvip.com/tag/101310.html
冠亚国际物流:https://www.goluckyvip.com/tag/101311.html
中世国际物流:https://www.goluckyvip.com/tag/101312.html
德科国际物流:https://www.goluckyvip.com/tag/101313.html
高阳国际物流:https://www.goluckyvip.com/tag/101314.html
ems国际快件寄件:https://www.goluckyvip.com/tag/101315.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流