SoFunction
Updated on 2025-02-28

Js dynamically add checkbox instance method to checkbox

First, using JS to dynamically generate Checkboxes can use similar statements:

Copy the codeThe code is as follows:

var checkBox=("input");
("type","checkbox");
("id",'123456');

However, the checkbox generated in this way does not have the text after the tail. If you need to add it, you need to use it
('XXX')
Method to generate a text node and place it behind checkbox.

With the following code, the program generates a checkbox and a text node, and puts them into a li object, and then adds the li object to the ul object:

Copy the codeThe code is as follows:

    var executerDiv=$("executerDiv");
    ="";
    var ul=("ul");

    for(var i=0;i<;i++){
        var arr=tableDatas[i];

// Add to check box
        var checkBox=("input");
        ("type","checkbox");
        ("id",arr[0]);
        ("name", arr[1]);

        var li=("li");
        (checkBox);       
        ((arr[1]));

        (li);       
    }   

    (ul);


In the above code, put checkbox in li and ul, which can achieve good arrangement effect. The CSS styles set by UL and li are as follows:
Copy the codeThe code is as follows:

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