Js动态添加复选框Checkbox的实例方法
更新时间：2013年04月08日 15:46:04 作者：
Js动态添加复选框Checkbox的实例方法，需要的朋友可以参考一下
首先，使用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;
}
相关文章
这篇文章主要介绍了JavaScript+CSS实现唯美蝴蝶动画,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要介绍了微信小程序利用button控制条件标签的变量问题，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-03-03
这篇文章主要介绍了JS中常用的输出方式(五种)的相关资料，非常不错具有参考借鉴价值,需要的朋友可以参考下2016-06-06
本文介绍了JavaScript中的this关键词指向，this是JavaScript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用，更多相关资料需要的小伙伴可以参考下面文章内容2022-05-05
这篇文章主要为大家详细介绍了js实现聊天对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
文章介绍了在纯前端JavaScript中如何读取和写入本地文件,浏览器环境限制了直接访问文件系统,但提供了文件上传和下载功能,对于文件读取,可以使用FileReader API,支持分片读取和流式处理,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了微信小程序跨页面传递data数据方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了基于JS+HTML实现弹窗提示是否确认提交功能,需要的朋友可以参考下2020-06-06
最近做一个项目，需要javascript动态插入样式，结果以前的方法失效了！查了2个小时的原因竟然是自己手贱，这个最后再说2012-02-02
封装好的省市地区联动控件附下载...2007-08-08
最新评论