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

最新推荐文章于 2023-08-21 11:40:33 发布

原创最新推荐文章于 2023-08-21 11:40:33 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

js 同时被 3 个专栏收录

83 篇文章

订阅专栏

web前端

53 篇文章

订阅专栏

layui switch

1 篇文章

订阅专栏

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

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'); //改变开关为开 //重新渲染