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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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加密解密函数代码
2013/06/19 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Prototype Selector对象学习
2009/07/23 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js函数排序的实例代码
2013/07/01 Javascript
JS继承用法实例分析
2015/02/05 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
MySQL 计算连续登录天数
2022/05/11 MySQL