Js動態新增複選框Checkbox的實例方法_javascript技巧

首先，使用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"); document.createElement("ul");

    for(var i=0;i        var arr=tableDatas[i];
        checkBox.setAttribute("type","checkbox");
       name" , arr[1]);

        var li=document.createElement("li");
       appendChild(document.createTextNode(arr[1] ));

        ul.appendChild(li);       
    }   

以上程式碼中，將checkbox放到li和ul中，這樣能起到良好的排列效果，UL和li設定的CSS樣式如下：

複製程式碼 程式碼如下:

    #executerDiv{        padding:0px;
        list-style-type:none;
      #executerDiv li{
        float:left;
        display:block;

        width:100px; 
     width:100px; 
   x;

        font-size:14px;  
        font- weight:bold;          
        color:#666666;

    

        後位:#ffffff;
    }