13518219792
这篇文章主要介绍LayUI中switch开关监听如何获取属性值、更改状态，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联建站是一家专业提供东洲企业网站建设,专注与网站建设、成都做网站、H5响应式网站、小程序制作等业务。10年已为东洲众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
使用方法
场景： 后台商品列表页，进行上下架状态的修改
①. html 代码参考
着重注意 我设置的两个属性值 lay-filter,switch_goods_id
②. 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是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。
以上是“LayUI中switch开关监听如何获取属性值、更改状态”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
