不废话,直接上图:

原始状态:

 

点击确定:

点击取消或者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. ASP.NET MVC下使用AngularJs语言(六)：获取下拉列表的value和Text

    前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能.但是没有实现怎样获取下拉列表的value和text功能. 下面分别使用ng-click和ng-change来实 ...

  2. webpack中使用typescript

    概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...

  3. Java学习笔记41（Properties类）

    Properties可以做到集合的数据持久存储 它是map接口的一个实现类,可以使用map类的方法, 不过存在区别:它没有泛型,规定键类型为字符串 这个集合在以后的开发中会经常用到,比如连接数据库等 ...

  4. Spring boot 参数相关注解

    最近使用swagger的在线文档调试接口时发现老是报参数问题,最后发现是方法中参数上的注解有问题,今天把填的坑做一下总结. 1. RequestParam 该注解有两个属性: name/value:表 ...

  5. linux下tar.bz2文件的 解压缩方法

    一 使用bzip2解压缩命令进行解压缩: bzip2 -d  gcc-4.1.0.tar.bz2 二 上面解压完之后执行下面的命令. tar -xvf gcc-4.1.0.tar 或 tar -xvf ...

  6. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  7. window7利用Nexus搭建maven私有服务器

    下载地址 https://www.sonatype.com/oss-thank-you-win64.zip: cmd管理员运行命令 nexus.exe/install Nexus Service:(n ...

  8. 移动 Ubuntu16.04 桌面左侧的启动器到屏幕底部

    与其他 Linux 发行版不同,Ubuntu 多年来一直使用 Unity 做桌面环境,该环境的最突出特点就是桌面左侧有一个启动器栏(Launcher).从 16.04 版本开始,Ubuntu 提供了一 ...

  9. Runtime 自动化归档

    Runtime的使用 (id)initWithCoder:(NSCoder *)decoder { if (self = [super init]) { unsigned ; Ivar *ivars ...

  10. 将H5页面的应用打包成APP(苹果和安卓版本)

    今天在清理手机上的应用时看到了“联名会员”这个“app”,我感觉只是个H5页面,不是一个原生的APP,但看起来和原生APP一模一样,心想,如果以后我开发了H5应用是不是可以把它搞成APP形式供别人下载 ...