layui+vuejs实现页面复选框

页面上出现复选框，复选框内容从后台获取，在选择后将数据传输到后台

queryDeployIns:function () {

$.getJSON("/config_manage/configModify/queryDeployIns?versionId=" + versionId, function (r) { //获取ip与id

vm.hosts = r.deployIns; //赋值给对象

console.log(vm.hosts);

var hoststr = "";

for (var index in vm.hosts){

var html = "<input type=\"checkbox\" name=\"host\" lay-filter=\"checkf\" lay-skin=\"primary\" value="+vm.hosts[index].instance_id+" title="+vm.hosts[index].host+ " checked=\"\">"; //拼接复选框将各个值给入

console.log(vm.hosts[index].host);

hoststr = hoststr + vm.hosts[index].instance_id + ";"

$("#check div").append(html);

}

form.on('checkbox(checkf)', function (data) {

console.log(data.elem.checked); //是否被选中，true或者false

console.log(data.value); //复选框value值，也可以通过data.elem.value得到

if (data.elem.checked == false){

hoststr = hoststr.replace(data.value + ";","");

}

else {

hoststr = hoststr + (data.value+";");

}

vm.deployList.hosts = hoststr;

console.log(vm.deployList.hosts);

})

 

form.render();

});

},

 

整体思路：

1、从后台获取id：ip map对象list

2、提前拼接好复选框实现的html代码

3、遍历list，将复选框一一实现，最后from.render

4、定义对象，一开始将全部value默认写入，字符串拼接

5、监听复选框，当被取消或是选中，截取或是添加