不废话,直接上图:

原始状态:

 

点击确定:

点击取消或者X

代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="static/layui/css/layui.css">

</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>

版权声明： 本文有 ```...裥簞點 发表于 bloghome博客

转载声明： 可自由转载、引用，但需要属名作者且注明文章出处。

文章链接： https://www.bloghome.com.cn/user/yysblog

layui switch 开关监听 弹出确定状态转换的更多相关文章

  1. flex 在父窗口监听弹出窗口里的某个按钮被点击

    flex 在父窗口监听弹出窗口里的某个按钮被点击 这样可以从子窗口拿回数据在父窗口处理数据,不必再子窗口中处理.在某些情形下省去了不少麻烦. /** * 右键菜单项单击事件 * changed by ...

  2. Android 监听手机GPS打开状态

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/70854942 本文出自[赵彦军的博客] GPS_Presenter package ...

  3. 监听Listview的滚动状态，是否滚动到了顶部或底部

    /** * @author:Jack Tony * @description : 监听listview的滑动状态,如果到了顶部就刷新数据 * @date :2015年2月9日 */ private c ...

  4. layUI 几个简单的弹出层

    导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> ...

  5. layui数据表格监听按钮问题

    layui官网文档源码 原始容器 <table id="demo" lay-filter="test"></table> 工具栏模板: ...

  6. layui之事件监听（table）

    这几天在学习layui,感觉这框架挺好用的,前后端都适用,许多原本比较复杂的东西用该框架很容易就能实现. 今天看了table里的事件监听这个知识点. 语法:table.on('event(filter ...

  7. MUI class="mui-switch" 开关监听

    如何对MUI中的switch开关按钮进行监听, 页面代码如下: <form class="mui-input-group"> <ul class="mu ...

  8. layui的select监听

    首先,select一定要放在<form class="layui-form" ></form>里面 然后,加监听<select id="id ...

  9. java代码对按钮进行监听---------------打印出每次点击按钮的次数

    其实,我真不会写嗯? package com.a.b; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...

随机推荐

  1. string Type

    Notes from C++ Primer Operations Operations of string support lots of operations of sequential conta ...

  2. Django orm 实现批量插入数据

    Django ORM 中的批量操作 在Hibenate中,通过批量提交SQL操作,部分地实现了数据库的批量操作.但在Django的ORM中的批量操作却要完美得多,真是一个惊喜. 数据模型定义 首先,定 ...

  3. 【书籍推荐】java初级到中级书籍推荐

    <编码>--必读 <程序是怎么跑起来的> --必读 <计算机系统概论> <深入理解计算机>--部分章节必读 <操作系统概论> <计算机 ...

  4. opus代码解析

    opus的初始化函数如下所示,在初始化的过程中,从代码结构上来看,这里主要完成是内存的申请,基本参数的定义 cOpusEncoder *opus_encoder_create(opus_int32 F ...

  5. Spring Boot 核心配置文件 bootstrap & application 详解。

    用过 Spring Boot 的都知道在 Spring Boot 中有以下两种配置文件 bootstrap (.yml 或者 .properties) application (.yml 或者 .pr ...

  6. Java 8 停止维护，Java 9 难产，IDEA 2018 发布，还有……

    祝大家五一劳动节快乐,工作顺利! 又到了总结上个月干货的时候了,这个月我们带来了各种Java技术干货,各种送书抽奖福利,各种面试题分享,各种最新动态资讯等. 5.1重磅活动 | 区块链免费送书 &am ...

  7. Java 9 被无情抛弃，Java 8 直接升级到 Java 10！！

    前几天写了一篇 Java 8 即将在 2019 年停止免费向企业提供更新的文章,企图迫使用户向更新一代的 Java 版本升级,但让人遗憾的是,小编今天收到了 Oracle Java 版本的升级推送,装 ...

  8. 前端下载excel文件功能的三种方法

    1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...

  9. 安装和配置jBPM4,并举个hello.w

    至于网上很复杂,但又不懂的插件,我们先不鸟他. myeclipse8\dropins这里就是给我们放插件的,类似SVN之类的.所以小生也修改了下,共享了下.只有放在目录下,打开应该可以的.下面是链接. ...

  10. process_begin: CreateProcess(NULL,......) make (e=87): 参数错误。

    在编译 trinity-android 的过程中,总是报 process_begin: CreateProcess(NULL,......) make (e=87): 参数错误 原因是.MK文件中包含 ...