layui switch 开关监听 弹出确定状态转换的例子


Posted in Javascript onSeptember 21, 2019

不废话,直接上图:

原始状态:

layui switch 开关监听 弹出确定状态转换的例子

点击确定:

layui switch 开关监听 弹出确定状态转换的例子

点击取消或者X

layui switch 开关监听 弹出确定状态转换的例子

代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">

    <div class="layui-input-block">
      <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
    </div>
  </div>
</form>
<script src="static/layui/layui.js"></script>

<script>
  //Demo
  layui.use(['form','jquery','layer'], function () {
    var form = layui.form;
    var jquery = layui.jquery;
    var layer = layui.layer;

    //监听提交
    form.on('switch(switchTest)', function (data) {
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启,true或者false
      console.log(data.value); //开关value值,也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
      var x=data.elem.checked;
      layer.open({
        content: 'test'
        ,btn: ['确定', '取消']
        ,yes: function(index, layero){
          data.elem.checked=x;
          form.render();
          layer.close(index);
          //按钮【按钮一】的回调
        }
        ,btn2: function(index, layero){
          //按钮【按钮二】的回调
          data.elem.checked=!x;
          form.render();
          layer.close(index);
          //return false 开启该代码可禁止点击该按钮关闭
        }
        ,cancel: function(){
          //右上角关闭回调
          data.elem.checked=!x;
          form.render();
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
      return false;
    });
  });
</script>
</body>
</html>

以上这篇layui switch 开关监听 弹出确定状态转换的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
javascript自执行函数
Feb 10 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
You might like
PHP中,文件上传
2006/12/06 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
Linux上比较文件的命令都有哪些
2012/02/24 面试题
几个常见的软件测试问题
2016/09/07 面试题
服装设计师职业生涯规划范文
2014/02/28 职场文书
个人欠款担保书
2014/05/20 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS