动态修改layui switch 状态与获取layui switch的值

最新推荐文章于 2023-10-16 10:16:33 发布

qaakd

最新推荐文章于 2023-10-16 10:16:33 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端 layui switch js 文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/qaakd/article/details/109248997

js 同时被 3 个专栏收录

83 篇文章

订阅专栏

web前端

53 篇文章

订阅专栏

layui switch

1 篇文章

订阅专栏

这篇博客详细介绍了layui框架中如何创建和操作开关（switch）组件，包括HTML结构和JavaScript实现。通过监听'switchTest'事件，可以获取开关状态，并弹出提示消息。同时，展示了如何使用layui的jQuery扩展改变开关状态并重新渲染表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<div class="layui-form">

<div class="layui-form-item">

<label class="layui-form-label">开关</label>

<div class="layui-input-block"> <input class="test" type="checkbox" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"> </div>

</div>

JS部分

layui.use(['form'], function(){ var form = layui.form ,layer = layui.layer //监听指定开关 form.on('switch(switchTest)', function(data){ if(this.checked){ //this.checked就是值 layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); }else{ layer.msg('开关：关掉了', { offset: '6px' }); } //do some ajax opeartiopns; }); }); // layui.jquery('.test').removeAttr('checked'); //改变开关为关 // layui.jquery('.test').attr('checked','checked'); //改变开关为开 //重新渲染