Js动态添加复选框Checkbox的解决办法

内容摘要

这篇文章主要为大家详细介绍了Js动态添加复选框Checkbox的简单示例，具有一定的参考价值，可以用来参考一下。

感兴趣Js动态添加复选框Checkbox的简单示例的小伙伴，下面一起跟随

文章正文

这篇文章主要为大家详细介绍了Js动态添加复选框Checkbox的简单示例，具有一定的参考价值，可以用来参考一下。

感兴趣Js动态添加复选框Checkbox的简单示例的小伙伴，下面一起跟随php教程的小编罗X来看看吧。<br>首先，使用JS动态产生Checkbox可以采用如下类似的语句：

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

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

document.createTextNode('XXX')

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

var executerDiv=$("executerDiv");  
executerDiv.innerHTML="";  
var ul=document.createElement("ul");  
  
for(var i=0;i<tableDatas.length;i++){  
var arr=tableDatas[i];  
  
// 加入复选框  
var checkBox=document.createElement("input");  
checkBox.setAttribute("type","checkbox");  
checkBox.setAttribute("id",arr[0]);  
checkBox.setAttribute("name", arr[1]);  
  
var li=document.createElement("li");  
li.appendChild(checkBox);  
li.appendChild(document.createTextNode(arr[1]));  
  
ul.appendChild(li);  
}  
  
executerDiv.appendChild(ul);

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

#executerDiv{  
}  
  
#executerDiv ul{  
margin:0px;  
padding:0px;  
list-style-type:none;  
vertical-align:middle ;  
}  
  
#executerDiv li{  
float:left;  
display:block;  
  
width:100px;  
height:20px;  
line-height:20px;  
  
font-size:14px;  
font-weight:bold;  
color:#666666;  
  
text-decoration:none;  
text-align:left;  
  
background:#ffffff;  
}

注：关于Js动态添加复选框Checkbox的简单示例的内容就先介绍到这里，更多相关文章的可以留意

代码注释

上一篇 Vue.js库入门的解决办法下一篇 Vuejs第十二篇之动态组件全面解析

作者：喵哥笔记

学的不仅是技术，更是梦想！