【JSP】layui+jsp,根据后台数据给复选框默认勾选

1.项目中经常使用复选框,当重复加载,就需要从数据库给复选框一个默认的值了。

2.接下来使用的是JSP中迭代的方法,给复选框绑定值。思路和方法不一定好,仅供参考。

<input type="checkbox" class="layui-form-checkbox" id="${menu.menu_code}" value="${menu.menu_id}" lay-skin="primary" data-id='${menu.menu_id}'/></td>

我是用的是input标签中的checkbox,复选框。

给input绑定id用来实现勾中方法。

<c:forEach var="model" items="${maps.menuData}" varStatus="varStatusName">
var code=$("#${model.menu_code}").prop("checked",true); //给复选框打勾
console.log(${model.menu_code});
</c:forEach> //使用jsp标准库JSTL,可能需要导入包
//foreach类似于循环,将menu_code循环使用prop方法
//来给input绑定 checked方法

以上<c:forEach>基础迭代标签,接受多种集合类型。

即循环id,给input复选框绑定勾中方法。

以下是js完整代码

<script>
$(function() { <c:forEach var="model" items="${maps.menuData}" varStatus="varStatusName">
var code=$("#${model.menu_code}").prop("checked",true); //给复选框打勾
console.log(${model.menu_code});
</c:forEach>
}); layui.use(["jquery", "upload", "form", "layer", "element"], function () {
var $ = layui.$,
element = layui.element,
layer = layui.layer,
upload = layui.upload,
form = layui.form;
//自定义验证规则
form.verify({
nikename: function(value){
if(value.length < 5){
return '昵称至少得5个字符啊';
}
}
,Hours: [/^[0-9_\u4e00-\u9fa5\\s·]+$/, '小时数只能是数字']
}); /* form.on('select(roleName)', function(data){
var grade =data.value;
var code=document.getElementById("role_code");
code.value=grade;
/!* console.log(data.elem); //得到select原始DOM对象*!/
console.log(data.value); //得到被选中的值
/!* console.log(data.othis); //得到美化后的DOM对象*!/
});
该备注方法是监听下拉框roleName,选中给role_code绑定value
*/
//监听提交
form.on('submit(add)',function (data) {
//获取所有的input标签
var input = document.getElementsByTagName("input");
var str="";
for (var i = 0; i < input.length; i++)
{
var obj = input[i];
//判断是否是checkbox并且已经选中
if (obj.type == "checkbox" && obj.checked)
{
var code = obj.value;//获取checkbox的值
str=str+code+",";
}
}
console.log(str);
var role_code = $('#role_code').val();
var role_menu = {
Role_Id: role_code,
Menu_Id: str
};
$.ajax({
url: "/CMS/Role_Menu/AddRole_Menu",
type: "post",
data: role_menu,
success: function (res) {
if (res == 'true') {
layer.alert("增加成功", {icon: 6}, function () {
// 获得frame索引
window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
window.location.reload();
});
} else {
layer.msg('添加失败', {icon: 6});
}
}
});
return false;
});
});
</script>

使用方法获取全部input 然后在使用方法筛选出选中的复选框value发送给后台

上一篇:解决el-tree lazy懒加载时,连续勾选前两个子节点后第二次进入默认选中时,将父节点也勾选的问题


下一篇:PTA习题集-团体程序设计天梯赛L1-002