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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 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
php 阴历-农历-转换类代码
2012/01/16 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python内存读写操作示例
2018/07/18 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python变量的作用域是什么
2020/05/26 Python
如何理解Python中包的引入
2020/05/29 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
请介绍一下Ant
2016/07/22 面试题
打造完美自荐信
2014/01/24 职场文书
党日活动总结
2014/05/07 职场文书
安全标语大全
2014/06/10 职场文书
法人委托书范本
2014/09/15 职场文书
先进典型发言材料
2014/12/30 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Java如何实现树的同构?
2021/06/22 Java/Android
MySQL的安装与配置详细教程
2021/06/26 MySQL