js动态生成多个复选框,动态绑定
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、效果演示