本文介绍 LayUI 中 switch 开关控件的使用，重点讲解如何通过 lay-filter 监听状态变化，获取自定义属性值，并结合 Ajax 请求实现商品上下架状态的异步更新与界面同步渲染。
背景
在页面开发过程中，有时需要利用 LayUI 提供的 switch 控件来实现状态切换功能，并在状态变更时触发 Ajax 请求进行数据交互。
在此场景下，不仅需要读取开关绑定的自定义属性值，还需根据服务器返回的结果动态调整开关的显示状态。
结合官方文档说明及社区实践经验，现将具体实现方法整理如下。
LayUI switch 开关监听与状态控制实战
使用方法
应用场景设定为后台商品列表页，主要功能是修改商品的上下架状态。
HTML 结构配置
①. 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 接口与服务器通信，根据返回数据判断是否执行“确定”按钮后的状态变更操作。
JavaScript 核心逻辑
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 开关监听 获取属性值、更改状态的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。