layui从数据库中获取复选框的值并默认选中方法


Posted in Javascript onAugust 15, 2018

如下:

layui从数据库中获取复选框的值并默认选中方法

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css"
href="../../../static/js/css/layui.css" rel="external nofollow" media="all">
<link rel="stylesheet" type="text/css"
href="../../../static/css/index-gb.css" rel="external nofollow" media="all">
<link rel="stylesheet"
href="http://at.alicdn.com/t/font_563459_gq4dpdw2k61xajor.css" rel="external nofollow" />
<style>
#node input[type=checkbox] {
display: inline;
}
</style>
</head>
<body>
<div class="div-con">
<form class="layui-form layui-form1">
<input type="hidden" name="roleid" id="id" value="#(role.roleid ??)">
<div class="layui-form-item form-item1">
<label class="layui-form-label form-label1">角色名称</label>
<div class="layui-input-block input-block1">
<input value="#(role.name)" type="text" name="name"
autocomplete="off" placeholder="请输入角色名称"
class="layui-input layui-input1">
</div>
</div>
<div class="layui-form-item form-item1">
<label class="layui-form-label form-label1">角色描述</label>
<div class="layui-input-block input-block1">
<textarea value="#(role.description)" name="description" id=""
cols="30" rows="10" class="layui-textarea textarea-me"
placeholder="请输入角色描述"></textarea>
</div>
</div>
<div class="layui-form-item form-item1">
<label class="layui-form-label form-label1">菜单权限</label>
<div class="layui-input-block input-block4">
<input type="checkbox" name="functional" lay-skin="primary"
value="接待人员管理" title="接待人员管理"> <input type="checkbox"
name="functional" lay-skin="primary" value="接待车辆管理" title="接待车辆管理">
<input type="checkbox" name="functional" lay-skin="primary"
value="来访信息录入" title="来访信息录入"> <input type="checkbox"
name="functional" lay-skin="primary" value="我的待办" title="我的待办">
<input type="checkbox" name="functional" lay-skin="primary"
value="人员接待统计" title="人员接待统计"> <input type="checkbox"
name="functional" lay-skin="primary" value="园区接待统计" title="园区接待统计">
<input type="checkbox" name="functional" lay-skin="primary"
value="角色管理" title="角色管理"> <input type="checkbox"
name="functional" lay-skin="primary" value="用户管理" title="用户管理">
<input type="checkbox" name="functional" lay-skin="primary"
value="接待礼遇管理" title="接待礼遇管理"> <input type="checkbox"
name="functional" lay-skin="primary" value="操作日志" title="操作日志">
<input type="checkbox" name="functional" lay-skin="primary"
value="登录日志" title="登录日志">
</div>
</div>
<div class="layui-form-item form-item-btn">
<div class="layui-input-block layui-input-block5">
<button class="layui-btn" lay-submit lay-filter="form">提交</button>
<button type="reset" class="layui-btn layui-btn-primary" id="reset">取消</button>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" src="../../../static/js/layui.all.js"
charset="utf-8"></script>
<script type="text/javascript" src="../../../static/js/jquery-3.2.0.js"
charset="utf-8"></script>
<script type="text/javascript">
/**
 * 将从数据库中获取到的菜单权限以,分隔开,并默认选中
 */
layui.use('form', function() {
var form = layui.form;
var functional='#(role.functional)';
var groupCheckbox = $("input[name='functional']");
for (i = 0; i < groupCheckbox.length; i++) {
  var val =groupCheckbox[i].value;
  if(functional.split(',').indexOf(val)!=-1){
  groupCheckbox[i].checked=true;
  }
}
form.render();
});
</script>
</html>
layui.use('form', function(){
 var form = layui.form;
 //监听提交
 layui.code
  form.on('submit(form)', function(data){
 //获取复选框选中的值
 var groupCheckbox=$("input[name='functional']");
 var functional="";
  for(i=0;i<groupCheckbox.length;i++){
   if(groupCheckbox[i].checked){
    var val =groupCheckbox[i].value;
    if(functional.length>0){
    functional+=","+val;
    }else{
    functional+=val;
    }
    
   }
  }
  data.field.functional=functional;
  
 $.post("/role/editOk",data.field,function(res){
 if(res.code=="0"){
 layer.msg(res.data);
 }else{
 layer.msg(res.data);
 }
 })
 return false;
 });
}); 
</script>

以上这篇layui从数据库中获取复选框的值并默认选中方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
Bootstrap table使用方法总结
May 10 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
关于微信小程序bug记录与解决方法
Aug 15 #Javascript
layui select获取自定义属性方法
Aug 15 #Javascript
Vue自定义toast组件的实例代码
Aug 15 #Javascript
JavaScript中set与get方法用法示例
Aug 15 #Javascript
基于JavaScript实现瀑布流布局
Aug 15 #Javascript
解决Layui 表单提交数据为空的问题
Aug 15 #Javascript
jQuery轮播图实例详解
Aug 15 #jQuery
You might like
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
pycharm安装图文教程
2017/05/02 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
一道python走迷宫算法题
2018/01/22 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
华为C++笔试题
2014/08/05 面试题
儿科护士自我鉴定
2013/10/14 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
有关爱国演讲稿
2014/05/07 职场文书
党员查摆剖析材料
2014/10/10 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技