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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
使用Vue写一个datepicker的示例
Jan 27 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
JavaScript实现两个数组的交集
Mar 25 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使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP asXML()函数讲解
2019/02/03 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript动态加载三
2012/08/22 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
解决python线程卡死的问题
2019/02/18 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
深入了解Python在HDA中的应用
2019/09/05 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
np.dot()函数的用法详解
2020/01/17 Python
Python ORM编程基础示例
2020/02/02 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
python制作微博图片爬取工具
2021/01/16 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
优秀共产党员先进事迹材料
2014/05/06 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
大学生党课心得体会
2016/01/07 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript