js动态加载复选框checkbox（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;
}
实例js方法：
function drawCheckBox(oSelect, oNode, sValue, sText) {
alert(oSelect);
if (oSelect == null) {
return -1;
}
if (oNode == null) {
return -2;
}
if (sValue == null) {
return -3;
}
if (sText == null) {
return -4;
}
//清空原有选项
oSelect.innerHTML="";
//根据xml节点列表的内容构造下拉框选项
var childs = oNode.childNodes;
var obj;
var idx = -1;
var ul=document.createElement("ul");
for (var i = 0; i < childs.length; i++) {
var child = childs.item(i);
var value = child.selectSingleNode(sValue).text;
var text = child.selectSingleNode(sText).text;
alert('value=='+value);
alert('text=='+text);
obj = document.createElement("input");
//obj.type="checkbox";
obj.setAttribute("type","checkbox");
obj.setAttribute("id",'box'+i);
obj.setAttribute("name",'box');
obj.value = value;
obj.text = text;
obj.title = text;
oSelect.appendChild(obj);
var li=document.createElement("li");
li.appendChild(obj);
li.appendChild(document.createTextNode(text));
ul.appendChild(li);
}
oSelect.appendChild(ul);
return 1;
}
HTML部分：
<tr>
<td align="right" class="sec2">
对应取票方式 </td>
<td id="qpfs">
</td>
</tr>
js赋值部分：
else if(method =="getQpfs") {
alert(http_text);
var oNodeNsr = xmlDoc.getElementsByTagName("ROW");
if(oNodeNsr!=null){
//获得变更项目的数据岛
DSO_SJSWJG.removeChild(DSO_SJSWJG.documentElement);
DSO_SJSWJG.appendChild(xmlDoc.selectSingleNode("//ROWSET"));
drawCheckBox(document.getElementById('qpfs'), DSO_SJSWJG.selectSingleNode("/ROWSET"), "DM", "MC");
}
}
本文原创，转载必追究版权。
