不废话,直接上图:

原始状态:

 

点击确定:

点击取消或者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. 在Azure DevOps Server (TFS 2019) 流水线传递参数

    变量概述 在Azure DevOps Server的流水线中,变量是衔接不同任务和不通代理之间的桥梁,它可以使相对松散.各自独立的任务之间相关影响并共享数据.在流水线中使用变量,可以在各任务之间相互调 ...

  2. SSH框架搭建过程详解

    Spring.Struts2.Hibernate框架: 具体三大框架的知识以前的文章写过,在这里整合 Spring框架知识:http://www.cnblogs.com/xuyiqing/catego ...

  3. Servlet案例7：jsp技术及案例

    jsp运行原理: 根据jsp文件创建java文件(servlet),并编译运行 第一次访问时会被翻译成servlet后执行 jsp三个指令: 1.page指令:页面翻译运行的属性的配置(通常使用默认) ...

  4. MySQL 线程池&连接池&长连接&短连接

    线程池 简介 1.mysql每连接每线程,mysql都分配一个单独的线程,该线程处理客户端发来的所有命令 2.每个线程会占用一定的系统资源,线程数越多消耗的系统资源也越多 3.线程的创建和销毁有一定的 ...

  5. ASP.NET Core中自定义路由约束

    路由约束 ASP.NET Core中,通过定义路由模板,可以在Url上传递变量,同时可以针对变量提供默认值.可选和约束. 约束的使用方法是在属性路由上添加指定的约束名,用法如下: // 单个使用 [R ...

  6. .NET手记－Autofac进阶（传递注册参数 Passing Parameters to Register）

    当你注册组件时,可以为组件服务传入一系列参数,用于服务解析时使用. 可使用的参数类型 Available Parameter Types Autofac提供了集中参数匹配类别: NamedParame ...

  7. Java排序方法sort的使用详解（转）

    一.对数组的排序: //对数组排序 public void arraySort(){ int[] arr = {1,4,6,333,8,2}; Arrays.sort(arr);//使用java.ut ...

  8. spring cloud+.net core搭建微服务架构：配置中心（四）

    前言 我们项目中有很多需要配置的地方,最常见的就是各种服务URL地址,这些地址针对不同的运行环境还不一样,不管和打包还是部署都麻烦,需要非常的小心.一般配置都是存储到配置文件里面,不管多小的配置变动, ...

  9. Spring Boot+redis存储session，满足集群部署、分布式系统的session共享

    本文讲述spring-boot工程中使用spring-session机制进行安全认证,并且通过redis存储session,满足集群部署.分布式系统的session共享. 原文链接:https://w ...

  10. 如何在GooglePlay上面发布应用

    上传和发布应用 注册开发者帐户后,您便可使用 Google Play 开发者控制台将应用上传到 Google Play. 访问 Google Play 开发者控制台. 点击屏幕顶部附近的添加新用户. ...