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、效果演示