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

时间:2022-09-22 13:54:02

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发送给后台

【JSP】layui+jsp,根据后台数据给复选框默认勾选的更多相关文章

  1. sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突

    gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...

  2. jQuery推断复选框是否勾选

    今天要实现一功能就是:复选框勾选时给input表单赋值,复选框取消时将表单值清除. 效果如图: 实现源代码:cyfID为复选框的id $("#cyfID").click(funct ...

  3. jQuery判断复选框是否勾选

    一个功能复选框勾选时给input表单赋值,复选框取消时将表单值清除. 功能:复选框勾选时给input表单赋值,复选框取消时将表单值清除. 实现源码:cyfID为复选框的id $("#cyfI ...

  4. 复选框的全选&plus;全不选&plus;ajax传递复选框的value值&plus;后台接受复选框默认值

    1.html代码 <!--全选框/全不选--> <input type="checkbox" name="all" id="all& ...

  5. spring mvc:复选框(多选)

    以user为例,user下有 username用户,password密码, address地址, receivePaper是否订阅, favotireFramework兴趣爱好, user.java ...

  6. jQuery学习&lpar;五&rpar;——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  7. php数组转换字符串及复选框如何勾选中

    php数组转换字符串及复选框如何勾选中,应用到函数 implode  explode 复选框被选中后如何保存数据,表单提交过来为数组,要转换字符串 用到函数implode if(!empty($_PO ...

  8. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  9. 在word中做复选框打对勾钩

    在word中做复选框打对勾钩 现在终于搞明白正确的操作方法 一.你在word里输入2610,按alt+X就能出 空checkbox 你在word里输入2611,按alt+X就能出 打了勾的checkb ...

随机推荐

  1. iOS开发之功能模块--推送之坑问题解决

    不管想不想看我后面再开发中总结的经验,但是很值得推荐一位大神写的关于苹果推送,很多内容哦:http://www.cnblogs.com/qiqibo/category/408304.html 苹果开发 ...

  2. PHP二维码生成的方法&lpar;google APi&comma;PHP类库&comma;libqrencode等&rpar;

    原文地址: http://blog.csdn.net/liuxinmingcode/article/details/7910975 ================================== ...

  3. 不可或缺 Windows Native &lpar;16&rpar; - C&plus;&plus;&colon; 函数重载&comma; 缺省参数&comma; 内联函数&comma; 函数模板

    [源码下载] 不可或缺 Windows Native (16) - C++: 函数重载, 缺省参数, 内联函数, 函数模板 作者:webabcd 介绍不可或缺 Windows Native 之 C++ ...

  4. HTTPS科普扫盲帖 对称加密 非对称加密

    http://www.cnblogs.com/chyingp/p/https-introduction.html

  5. Machine Learning Methods&colon; Decision trees and forests

    Machine Learning Methods: Decision trees and forests This post contains our crib notes on the basics ...

  6. VS中批量删除cs代码中的&num;region和&num;endregion

    Visual Studio中如何批量删除cs代码中的#region和#endregion,不删除它们中间的代码,只删除这两个标记及标记的注解的方法.Vs中提供了很强大的文本查找与替换功能,简单的替换只 ...

  7. Oracle数据库死锁和MySQL死锁构造和比较

    最近在复习数据库的事务隔离性,顺便构造了一下在Oracle上和MySQL上的死锁以比较异同. 在Oracle上面的实验 在Oracle中,因为是显式提交,所以默认可以认为在一个会话中若没有使用comm ...

  8. SQL Server性能优化(10)非聚集索引的存储结构

    一,新建测试表 CREATE TABLE [dbo].[Users]( ,) NOT NULL, ) NOT NULL, [CreatTime] [datetime] NOT NULL ) ON [P ...

  9. 【AtCoder】ARC081

    C - Make a Rectangle 每次取两个相同的且最大的边,取两次即可 #include <bits/stdc++.h> #define fi first #define se ...

  10. 使用SQL语句创建数据库1——创建一个数据库文件和一个日志文件的数据库

    目的:创建一个数据库文件和一个日志文件的数据库 在matser数据库下新建查询,输入的命令如下: USE master——指向当前使用的数据库.创建数据库实际上是向master数据库中增加一条数据库信 ...