HTML：
<div id="addcheckbox"> </div>
js：
動態生成的複選框：
data是json數據
$.get("鏈接",function(data){
for ( var i = 0; i < data.length; i++) {
$("#addcheckbox").append("<label><input type='checkbox' name='labelname' value='"+data[i].labelid+"'>"+data[i].labelname+"</label>");
}
});
效果如下：
動態綁定選中的複選框：
data是json數據
$.get("鏈接",function(data){
console.log(data);
var boxes = document.getElementsByName("labelname");
for(i=0;i<boxes.length;i++){
for ( var j = 0; j < data.length; j++) {
if(boxes[i].value == data[j].labelid){
boxes[i].checked = true;
break
}
}
}
});
效果如下：
另一種表達方法：
1、HTML結構
<input name="test" type="checkbox" value="1" />item-1
<input name="test" type="checkbox" value="2" />item-2
<input name="test" type="checkbox" value="3" />item-3
<input name="test" type="checkbox" value="4" />item-4
<input name="test" type="checkbox" value="5" />item-5
<input type="text" id="val"><input type="button" value="確定" onclick="fun()">
2、javascript代碼
function fun(){
var val = document.getElementById("val").value.split(",");
var boxes = document.getElementsByName("test");
for(i=0;i<boxes.length;i++){
for(j=0;j<val.length;j++){
if(boxes[i].value == val[j]){
boxes[i].checked = true;
break
}
}
}
}
3、效果演示
