脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Js动态添加复选框Checkbox

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

您可能感兴趣的文章:

相关文章

  • 微信小程序调用支付接口的完整流程记录

    微信小程序调用支付接口的完整流程记录

    我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序调用支付接口的完整流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • js获取微信版本号的方法

    js获取微信版本号的方法

    本文给大家分享的是使用javascript实现判断微信版本号以及判断是否在内置的微信浏览器中打开的代码，十分的简单实用，有需要的小伙伴可以参考下。
    2015-05-05
  • js每隔5分钟执行一次ajax请求的实现方法

    js每隔5分钟执行一次ajax请求的实现方法

    每隔5分钟执行一次ajax请求，如何实现？下面有个不错的示例，感兴趣的朋友可以参考下
    2013-11-11
  • JavaScript基本语法_动力节点Java学院整理

    JavaScript基本语法_动力节点Java学院整理

    这篇文章主要介绍了JavaScript基本语法，适合刚入门的同学，有兴趣的可以了解下。
    2017-06-06
  • JavaScript内置对象之Array的使用小结

    JavaScript内置对象之Array的使用小结

    这篇文章主要介绍了JavaScript内置对象之Array的使用小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript深入介绍WebAPI的用法

    JavaScript深入介绍WebAPI的用法

    JS分成三个大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是让前端开发建立基本的编程思维。但是要想真正来写一个更加复杂的有交互式的页面,还需要WebAPI的支持，相当于把后端编程实现成前端交互。DOM+BOM就组成了WebAPI
    2022-06-06
  • JavaScript 新提案optional chaining可选链属性原理详解

    JavaScript 新提案optional chaining可选链属性原理详解

    这篇文章主要为大家介绍了JavaScript 新提案optional chaining可选链属性原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • javascript 数组排序函数sort和reverse使用介绍

    javascript 数组排序函数sort和reverse使用介绍

    reverse方法将一个Array对象中的元素位置进行反转，sort方法返回一个元素已经进行了排序的 Array 对象，下面为大家介绍下
    2013-11-11
  • 让复选框只能选择一项的方法

    让复选框只能选择一项的方法

    如何让复选框只能选择一项，实现的方法有很多，在本文为大家详细介绍下，有此需求的朋友可以参考下
    2013-10-10
  • JS控制只能输入数字并且最多允许小数点两位

    JS控制只能输入数字并且最多允许小数点两位

    这篇文章主要介绍了JS控制只能输入数字并且最多允许小数点两位,本文给大家提到js如何限制input输入框只能输入数字问题，需要的朋友可以参考下
    2019-11-11

最新评论