JS Dynamic Add CheckBox checkbox instance method _javascript Tips

First of all, the use of JS dynamically generated checkbox can be similar to the following statements:

Copy Code code as follows:

var checkbox=document.createelement ("input");
Checkbox.setattribute ("Type", "checkbox");
Checkbox.setattribute ("id", ' 123456 ');

However, this produces a checkbox that has no trailing text, and if it needs to be added, you need to use the
document.createTextNode (' XXX ')
method to produce a text node that is placed behind the checkbox.

The following code, the program produces a checkbox and a text node, and put them in an Li object, and then add the Li object to the UL object:

Copy Code code as follows:

var executerdiv=$ ("Executerdiv");
Executerdiv.innerhtml= "";
var ul=document.createelement ("ul");

for (Var i=0;i<tabledatas.length;i++) {
var arr=tabledatas[i];

Add check box
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);

In the above code, the checkbox will be placed in Li and UL, this can play a good arrangement, UL and Li set the CSS style as follows:

Copy Code code 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;
}