不废话,直接上图:

原始状态:

 

点击确定:

点击取消或者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. Lerning Entity Framework 6 ------ Complex types

    Complex types are classes that map to a subset of columns of a table.They don't contains key. They a ...

  2. tomcat虚拟目录配置

    Tomcat6.0虚拟目录配置[转] 设虚拟目录 "site",通过 http://localhost:8080/site 访问物理路径 D:"site 文件夹里面的内容 ...

  3. fiddler 使用方法汇总

    作为网络开发人员,怎能不使用一些抓包工具呢?fiddler是个不错的选择. 不过,一般情况下,我们往往使用浏览器自带的控制台的[网络]选项就可以达到查看数据的通信情况了,当然,一些浏览器不容易捕捉的事 ...

  4. MySQL 字符集utf8和utf-8的关系

    目录 什么是字符集(character set) 校对规则(collation) ASCII码 Unicode国际化支持 UTF-8 utf8 utf8与utf8mb4的关系 超集 字符集设置 什么是 ...

  5. IIS服务器多站点 的 https证书使用443端口 解决方案

    默认情况一个服务器的IIS只能绑定一个HTTPS也就是443端口 要实现多个站点对应HTTPS只能更改IIS配置 首先把每个站点分配个不同端口,如443.444.445…(证书一定要是多域的) 然后重 ...

  6. POJ 2909

    #include<iostream> #include<stdio.h> #define M 35000 #include<math.h> #define N 38 ...

  7. asp.net mvc开发过程中的一些小细节

    现在做网站用mvc越来越普及了,其好处就不说了,在这里只记录一些很多人都容易忽视的地方. 引用本地css和js文件的写法 这应该是最不受重视的地方,有同事也说我有点小题大作,但我觉得用mvc还是得有一 ...

  8. Ubuntu 16.04 截图快捷键

    一.查看 "截图" 快捷键 打开 "系统设置",点击 "硬件" 下的 "键盘",然后点击 "快捷键" ...

  9. Thread,ThreadPool,Task, 到async await 的基本使用方法和理解

    很久以前的一个面试场景: 面试官:说说你对JavaScript闭包的理解吧? 我:嗯,平时都是前端工程师在写JS,我们一般只管写后端代码. 面试官:你是后端程序员啊,好吧,那问问你多线程编程的问题吧. ...

  10. 全网最详细的IDEA里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(类似eclipse里同一个workspace下【一个子项目】并存）（图文详解）

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在Myeclipse里,则是File -> new -> ...