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;
    }

相关文章

  • JS是按值传递还是按引用传递

    JS是按值传递还是按引用传递

    在分析这个问题之前,我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。
    2015-01-01
  • uni-app弹出层uni-popup使用及修改默认样式的方法实例

    uni-app弹出层uni-popup使用及修改默认样式的方法实例

    我们在使用uniapp开发的时候,有时可以使用uniapp自有的样式模板,这样可以提高开发效率,下面这篇文章主要给大家介绍了关于uni-app弹出层uni-popup使用及修改默认样式的相关资料,需要的朋友可以参考下
    2022-11-11
  • js实现仿qq消息的弹出窗效果

    js实现仿qq消息的弹出窗效果

    这篇文章主要介绍了js实现仿qq消息的弹出窗效果,文章代码实现模拟qq弹出框消息提醒,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • layui form表单提交之后重新加载数据表格的方法

    layui form表单提交之后重新加载数据表格的方法

    今天小编就为大家分享一篇layui form表单提交之后重新加载数据表格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现滑动拼图验证功能完整示例

    JS实现滑动拼图验证功能完整示例

    这篇文章主要介绍了JS实现滑动拼图验证功能,结合完整实例形式分析了JS滑动拼图验证相关原理、实现步骤与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    这篇文章主要介绍了JS使用正则表达式获取小括号、中括号及花括号内容的方法,涉及javascript针对三种括号正则匹配的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • JavaScript面向对象的程序设计(犯迷糊的小羊)

    JavaScript面向对象的程序设计(犯迷糊的小羊)

    这篇文章主要介绍了JavaScript面向对象的程序设计(犯迷糊的小羊),需要的朋友可以参考下
    2018-05-05
  • Swiper自定义分页器使用详解

    Swiper自定义分页器使用详解

    这篇文章主要为大家详细介绍了Swiper自定义分页器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 一文彻底理解JavaScript原型与原型链

    一文彻底理解JavaScript原型与原型链

    这篇文章主要介绍了一文彻底理解JavaScript原型与原型链,JavaScript中有许多内置对象,如:Object, Math, Date等,文章围绕主题展开主题详情,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 微信小程序实现顶部选项卡(swiper)

    微信小程序实现顶部选项卡(swiper)

    这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论