layui中的switch开关

我不是女神ヾ 2022-05-21 10:26 314阅读 0赞

效果如下图：

![70][]

显然这个插件是一个checkbox，只是在layui中封装了。所以layui的js和css是必不可少的。

Html代码：

<form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
    </form>

Js代码：

<script>
        layui.use(['form'], function(){
            var form = layui.form
                ,layer = layui.layer
            //监听指定开关
            form.on('switch(switchTest)', function(data){
                if(this.checked){
                    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                        offset: '6px'
                    });
                    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅 仅是ON|OFF', data.othis)
                }else{
                    layer.msg('开关： 关掉了', {
                        offset: '6px'
                    });
                }
                //do some ajax opeartiopns;
            });
        });
    </script>

Ok了，试一下吧。可以放在form表单中作为一项指标随form提交。也可以在监听开关的方法中单独进行ajax操作。

[70]: /images/20220521/2cd9265a0afa474f96bfebb1f66e3f9d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element的Switch开关

<el-table-column prop="onlineStatus" label="是否上线" align="center" width="95" fixed="r

男娘i/ 2022年12月30日 14:00/ 0 赞/ 199 阅读

相关 Element 表格内添加 Switch 开关

实现效果 ![在这里插入图片描述][20201013162214800.png_pic_center] 主要就是使用了 slot-scope=“scope” 给开关的

我不是女神ヾ/ 2022年12月14日 12:20/ 0 赞/ 472 阅读

相关 vue+el-switch开关的使用

重点！！注意change事件的 $event 参数！！是开关变化的新状态值！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

我会带着你远行/ 2022年10月14日 12:55/ 0 赞/ 377 阅读

相关 layui开关还原OFF状态，重置layui开关

layui开关的input，当第二次点进去怎么才能还原为off状态？ <input type="checkbox" name="switch" lay-skin="s

阳光穿透心脏的1/2处/ 2022年08月29日 13:45/ 0 赞/ 266 阅读

相关纯CSS样式写switch开关

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

喜欢ヅ旅行/ 2022年06月07日 11:59/ 0 赞/ 246 阅读

相关 iview table render集成switch开关

iview table render集成switch开关今天想要分享的是iview table render集成switch开关修改table表格的值，看文档

曾经终败给现在/ 2022年06月02日 03:50/ 0 赞/ 393 阅读

相关 layui中的switch开关

效果如下图： ![70][] 显然这个插件是一个checkbox，只是在layui中封装了。所以layui的js和css是必不可少的。 Html代码： <

我不是女神ヾ/ 2022年05月21日 10:26/ 0 赞/ 315 阅读

相关 css3 switch开关的实现

<input type="checkbox" id="switch" /><label for="switch">Toggle</label> inp

逃离我推掉我的手/ 2022年05月14日 04:53/ 0 赞/ 215 阅读

相关 Form-switch开关

<e

╰+哭是因爲堅強的太久メ/ 2022年03月30日 08:18/ 0 赞/ 299 阅读

相关 CSS做个Switch开关

Switch开关：　　![1041634-20170228144156001-1353181817.png][] 　　![1041634-2017022814420239

妖狐艹你老母/ 2021年09月15日 15:10/ 0 赞/ 350 阅读