本文主要是介绍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、监听复选框，当被取消或是选中，截取或是添加
这篇关于layui+vuejs实现页面复选框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
