LayUI switch 开关监听获取属性值、更改状态_css写开关switch监听获取不到一开始渲染得到的值

①. 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 开关监听 弹出确定状态转换
                    今天在设计页面时，想使用一下 LayUI 的 switch 控件，在需要更改状态的时候进行 ajax请求传输需要获取其中的自定义属性值，同时根据服务器返回数据进行状态的更改通过参考文档及网友的经验，在此整理一番使用方法场景： 后台商品列表页，进行上下架状态的修改①. html 代码参考着重注意 我设置的两个属性值 lay-filter,switch_goods_id...
HTML部分
<div class="layui-input-inline">
	<input type="checkbox" name="my_checkbox" id="my_checkbox" lay-filter="my_checkbox" lay-text="ON|OFF" lay-skin="switch">
开关状态获取：
$.trim($('#my_checkbox').is(":checke
<div class="layui-form" lay-filter="formList">
        <table class="larry-hide" id="tableList" data-url="{:url('Index/hostList')}" lay-filter="tableList">
        </table>
    </form>
				页面初始化时，进行判断开关应该显示ON还是OFF。这里是通过添加和移除class样式来改变开关的开或是关。
这个是开关监控事件，用来监控开关点击开关后，开关的值为多少
既然开关无法更改value，那就自己新建一个隐藏域，专门用来存储开关的值，页面加载的时候赋值一次，然后每点击一次开关就赋值一次（在开关监控事件里面进行赋值操作）
var id = obj.othis.parents('tr').find("td :first").text();
 // 或者
varuserId= data.othis.parents('tr').find("td").eq(1).text();
//方法二取数据 （根据...
<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.
switchValue.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // 在这里处理开关状态改变的逻辑
        // 如果需要刷新开关的新值，可以在这里更新开关的状态
        switchValue.setChecked(isChecked);
在这段代码中，我们使用 `setOnCheckedChangeListener` 方法来设置开关状态改变的监听器，在监听器的回调函数中可以处理开关状态改变的逻辑，并通过 `setChecked` 方法来更新开关的状态，从而刷新开关的新值。