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 new一个对象的实质
Jan 07 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
Vue表单控件数据绑定方法详解
Feb 05 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 文件上传类代码
2011/08/06 PHP
php实现的短网址算法分享
2014/06/20 PHP
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python笔记之代理模式
2019/11/20 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python集合能干吗
2020/07/19 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
教师实习自我鉴定
2013/12/14 职场文书
2014年会策划方案
2014/05/11 职场文书
五水共治一句话承诺
2014/05/30 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
个人剖析材料范文
2014/09/30 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python