您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失! 
  • 首 页
  • VIP源码
  • 源码论坛
  • javascript技术你可以轻松的阅读...
    JavaScript与PHP间传送数据
    禁止网页右键查看源码(源文件)
    JavaScript Chart 插件整理
    javascript sudoku 数独智力游戏
    Js动态添加复选框Checkbox的实例
    JavaScript中的私有/静态属性介
    JS版网站风格切换实例代码
    Javascript 函数对象的多重身份
    javascript中删除指定数组中指定
    javascript读取xml

    首先,使用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;
    }