layui switch 開關(guān)監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子
更新時間：2019年09月21日 09:18:30 作者：```...簡單點
今天小編就為大家分享一篇layui switch 開關(guān)監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
不廢話,直接上圖：
原始狀態(tài):
點擊確定:
點擊取消或者X
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" >
</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="開啟|關(guān)閉">
</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;
//監(jiān)聽提交
form.on('switch(switchTest)', function (data) {
console.log(data.elem); //得到checkbox原始DOM對象
console.log(data.elem.checked); //開關(guān)是否開啟，true或者false
console.log(data.value); //開關(guān)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);
//按鈕【按鈕一】的回調(diào)
}
,btn2: function(index, layero){
//按鈕【按鈕二】的回調(diào)
data.elem.checked=!x;
form.render();
layer.close(index);
//return false 開啟該代碼可禁止點擊該按鈕關(guān)閉
}
,cancel: function(){
//右上角關(guān)閉回調(diào)
data.elem.checked=!x;
form.render();
//return false 開啟該代碼可禁止點擊該按鈕關(guān)閉
}
});
return false;
});
});
</script>
</body>
</html>
以上這篇layui switch 開關(guān)監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解ES6 Promise對象then方法鏈?zhǔn)秸{(diào)用
這篇文章主要介紹了詳解ES6 Promise對象then方法鏈?zhǔn)秸{(diào)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了JSONP跨域模擬百度搜索,JSONP是JSON?with?padding?的簡寫,應(yīng)用JSON的一種新方法，在后來的Web服務(wù)中非常流行，JSONP看起來與JSON差不多，只不過是被包含在函數(shù)中調(diào)用的JSON,對此感興趣的小伙伴可以參考一下下面文章內(nèi)容2021-12-12
javascript驗證內(nèi)容為數(shù)字以及長度為10的簡單實例
下面小編就為大家?guī)硪黄猨avascript驗證內(nèi)容為數(shù)字以及長度為10的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
解讀TypeScript與JavaScript的區(qū)別
這篇文章主要介紹了TypeScript與JavaScript的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在一些電商網(wǎng)站上，經(jīng)?？吹接猩唐穲D片被放大查看的功能，所以本文將使用前端技術(shù)實現(xiàn)一個簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?/div> 2023-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)網(wǎng)頁版貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript數(shù)組去重實現(xiàn)方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組去重實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組去重ES3、ES5及ES6常見實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-01-01
Document.body.scrollTop的值總為零的快速解決辦法
這篇文章主要介紹了Document.body.scrollTop的值總為零的解決方法的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗證，重點介紹了E-mail驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了Javascript原型與原型鏈深入詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07最新評論