Js动态添加复选框Checkbox的实例方法


Posted in Javascript onApril 08, 2013

首先,使用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 相关文章推荐
JavaScript 数组运用实现代码
Apr 13 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 #Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 #Javascript
javascript中常用编程知识
Apr 08 #Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 #Javascript
You might like
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JS常用算法实现代码
2016/11/14 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
生日宴会答谢词
2014/01/09 职场文书
师德个人剖析材料
2014/02/02 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
课外活动实习计划
2015/01/19 职场文书
商务司机岗位职责
2015/04/10 职场文书
公司档案管理制度
2015/08/05 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
德生BCL3000抢先使用感受和评价
2022/04/07 无线电