layui switch 開關(guān)監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子
更新時(shí)間：2019年09月21日 09:18:30 作者：```...簡(jiǎn)單點(diǎn)
今天小編就為大家分享一篇layui switch 開關(guān)監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
不廢話,直接上圖：
原始狀態(tài):
點(diǎn)擊確定:
點(diǎn)擊取消或者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對(duì)象
console.log(data.elem.checked); //開關(guān)是否開啟，true或者false
console.log(data.value); //開關(guān)value值，也可以通過(guò)data.elem.value得到
console.log(data.othis); //得到美化后的DOM對(duì)象
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 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
,cancel: function(){
//右上角關(guān)閉回調(diào)
data.elem.checked=!x;
form.render();
//return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
});
return false;
});
});
</script>
</body>
</html>
以上這篇layui switch 開關(guān)監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法實(shí)例詳解
函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。通過(guò)本文給大家介紹JavaScript函數(shù)內(nèi)部屬性和函數(shù)方法，感興趣的朋友一起學(xué)習(xí)吧2016-03-03
推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)
這篇文章主要介紹了推薦三款日期選擇插件，My97DatePicker、用于PC端的jquery.datepicker，以及專注于移動(dòng)端的Mobiscroll，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
下面小編就為大家?guī)?lái)一篇基于webpack 實(shí)用配置方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Javascript函數(shù)式編程簡(jiǎn)單介紹
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語(yǔ)言最重要的基礎(chǔ)是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10
全面解析Bootstrap中scrollspy（滾動(dòng)監(jiān)聽）的使用方法
這篇文章主要為大家全面解析Bootstrap中scrollspy（滾動(dòng)偵聽）的使用方法，感興趣的小伙伴們可以參考一下2016-06-06
JavaScript圖片上傳并預(yù)覽的完整實(shí)例
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下2022-01-01
js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)控制textarea輸入字符串的個(gè)數(shù),鼠標(biāo)按下抬起判斷輸入字符數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章介紹了用innerhtml提高頁(yè)面打開速度的方法，有需要的朋友可以參考一下2013-08-08
js 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例解析
這篇文章主要為大家介紹了js實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序引用外部js，外部樣式，公共頁(yè)面模板,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07最新評(píng)論