不废话,直接上图:

原始状态:

 

点击确定:

点击取消或者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. MyBatis 源码分析 - 缓存原理

    1.简介 在 Web 应用中,缓存是必不可少的组件.通常我们都会用 Redis 或 memcached 等缓存中间件,拦截大量奔向数据库的请求,减轻数据库压力.作为一个重要的组件,MyBatis 自然 ...

  2. 深圳scala-meetup-20180902（1）- Monadic 编程风格

    刚完成了9月份深圳scala-meetup,趁刮台风有空,把我在meetup里的分享在这里发表一下.我这次的分享主要分三个主题:“Monadic编程风格“.”Future vs Task and Re ...

  3. Go语言数据类型

    目录 基本数据类型说明 整型 浮点型 字符 字符类型本质探讨 布尔型 字符串 指针 值类型与引用类型 基本数据类型默认值 基本数据类型相互转换 注意事项 其他基本类型转string类型 string类 ...

  4. maven 下载镜像文件卡，下载pom文件慢的问题

    问题原因: maven默认的镜像库URL为 http://maven.net.cn/content/groups/public/ 由于网络原因,可能导致响应速度超级慢,或者无法效应: 解决方法: 配置 ...

  5. 从一个集合中查找最大最小的N个元素——Python heapq 堆数据结构

    Top N问题在搜索引擎.推荐系统领域应用很广, 如果用我们较为常见的语言,如C.C++.Java等,代码量至少也得五行,但是用Python的话,只用一个函数就能搞定,只需引入heapq(堆队列)这个 ...

  6. javascript中的LHS和RHS

    最近在拜读<你不知道的javascript>,接触到一个比较陌生的概念,LHS查询和RHS查询. 简单的一句话来讲,当变量出现在赋值操作符的左侧时进行LHS查询,出现在右侧时进行RHS查询 ...

  7. Git本地上传到服务器

    Git本地上传到服务器 2018年05月17日 10:45:02 VV-King 阅读数:643 标签: git   1.本机window系统的话先下载msysgit  下载后在开始菜单里面找到 &q ...

  8. 安装Elasticsearch中Head插件并使用

    基础环境 Elasticsearch集群搭建请参考前一篇文章http://www.cnblogs.com/aubin/p/8012840.html 系统 节点名 IP 软件版本 CentOS7.3 e ...

  9. Mysql插入中文的字段内容时乱码的解决方法

    Mysql插入中文的字段内容时乱码的解决方法 1.我们在往数据库插入数据的时候,当遇到中文字符的插入时会发现插入的数据会变为?号,也就是乱码,如下所示: 2.这时候我们使用如下的查询语句可以看到相应的 ...

  10. MD5加密之加密字符串

    public static String encode(String str) { String encodeString = ""; try { MessageDigest md ...