如何获取并修改LayUI switch开关的属性值和状态？

本文共计718个文字，预计阅读时间需要3分钟。

背景：今天在设计页面时，想使用LayUI的switch控件。需求：需要在状态需要更改时进行ajax请求，传递自定义属性值，同时获取并返回数据状态进行状态更新。参考：[LayUI switch控件文档](https://www.layuicms.com/doc/element/switch.)

背景

今天在设计页面时，想使用一下 LayUI 的 switch 控件，在需要更改状态的时候进行 ajax请求传输

需要获取其中的自定义属性值，同时根据服务器返回数据进行状态的更改

通过参考文档及网友的经验，在此整理一番

使用方法

场景： 后台商品列表页，进行上下架状态的修改

①. html 代码参考

着重注意 我设置的两个属性值 lay-filter,switch_goods_id

<input type="checkbox" class="switch_checked" lay-filter="switchGoodsID" switch_goods_id="{$vo['goods_id']}" lay-skin="switch" {$vo['status_checked']} lay-text="上架|下架">

②. js 核心代码参考

以我的设计思路，需要获取当前需要更改状态的商品ID,然后通过ajax回调数据，判断是否执行 “确定” 按钮后的状态改变即可

layui.use(['form'], function () { var form = layui.form; form.on('switch(switchGoodsID)',function (data) { //开关是否开启，true或者false var checked = data.elem.checked; //获取所需属性值 var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue; console.log(checked); console.log(switch_goods_id); layer.msg('合理搭配，展示不一样的风格', { time: 5000, //5s后自动关闭 btn: ['确定', '取消'] ,yes: function(index){ //TODO 此时进行ajax的服务器访问，如果返回数据正常，则进行后面代码的调用 data.elem.checked = checked; form.render(); layer.close(index); //按钮的回调 } ,btn2: function(index){ //按钮的回调 data.elem.checked=!checked; form.render(); layer.close(index); //return false; //开启该代码可禁止点击该按钮关闭 } }); }); });

简化后的代码如下（不需要弹出选择界面）：

layui.use(['form'], function () { var form = layui.form; form.on('switch(switchGoodsID)',function (data) { //开关是否开启，true或者false var checked = data.elem.checked; //获取所需属性值 var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue; console.log(checked); console.log(switch_goods_id); //TODO 此时进行ajax的服务器访问，如果返回数据正常，则进行后面代码的调用 var serverStatus = 1; if(serverStatus){ data.elem.checked = checked; }else { data.elem.checked = !checked; } form.render(); }); });

附录：

注意：

当进行表格数据分页显示等需求时，注意完成代码替换后，进行再次渲染：

form.render(); //更新全部 也可以使用：layui.form.render() form.render('select'); //刷新select选择框渲染

以上这篇LayUI switch 开关监听 获取属性值、更改状态的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。