Js动态添加复选框Checkbox的简单示例

前端之家收集整理的这篇文章主要介绍了Js动态添加复选框Checkbox的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣Js动态添加复选框CheckBox的简单示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。<br>
首先,使用JS动态产生CheckBox可以采用如下类似的语句: 
var checkBox=document.createElement("input");  
checkBox.setAttribute("type","checkBox");  
checkBox.setAttribute("id",'123456');  @H_301_3@
但是,这样产生的checkBox是不带尾后的文字的,如果需要添加,那么需要使用 
document.createTextNode('XXX')  @H_301_3@
方法来产生一个文本节点,放在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",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); @H_301_3@
以上代码中,将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;  
}  @H_301_3@
原文链接:https://www.f2er.com/jquery/527425.html

猜你在找的jQuery相关文章