Layui的switch开关传值改变状态那点事......

最新推荐文章于 2025-02-18 11:46:09 发布

慕斯-ing

最新推荐文章于 2025-02-18 11:46:09 发布

阅读量8.3k

点赞数 6

分类专栏： layui 文章标签： layui 前端

本文链接：https://blog.csdn.net/blbyu/article/details/116331490

版权

layui 专栏收录该内容

11 篇文章

订阅专栏

本文介绍layui框架中的开关组件如何自定义传递给后端的状态值，包括三种不同的设置方法及其适用场景，并展示了如何修改开关默认显示的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui的开关按钮展示效果如下：
在这里插入图片描述
默认传递到后台的值如下：（默认选中时传值为on，默认值往往不符合我们的需要）

改变传递到后台的值：
（方法一）在input中加一个属性。value=“1”，这样选中传递值1；有局限性，但方便快捷。

 <input type="checkbox" name="xd1" id="xd1" lay-skin="switch" lay-text="达标|不达标" checked value="1">

（方法二）直接改变底层传来的data.value值，可以方便实现传值改变，但还需要控制开关自刷新状态，不然会刷刷两下就卡住了。

  //也可以实现，但有局限性，需解决刷新开关状态以无限次更改。
           form.on('switch(kg1)', function(data){
      	       //console.log(data.elem); //得到checkbox原始DOM对象
     	       //console.log(data.elem.checked); //开关是否开启，true或者false
     	       //console.log(data.value); //开关value值，也可以通过data.elem.value得到
               //console.log(data.othis); //得到美化后的DOM对象
               if(data.elem.checked="false"){
                   data.value=0;
               }
           });

（方法三）此时，选中传的值为1，未选中为0。全面，但略复杂，推荐。之后还需要自行将改变后的值传到后端。

<input type="checkbox" name="xd1" id="xd1" lay-skin="switch" lay-text="达标|不达标"  lay-filter="kg1" >

 layui.use(['form', 'layer','laydate','upload'], function() {
        var upload = layui.upload;
        $ = layui.jquery;
        var form = layui.form；

		//监听指定开关
        form.on('switch(kg1)', function(data){
            this.checked?data.value=1:data.value=0; //更改选中和未选中时，传动后台的值，此时选中传1，未选中传0。
            layer.msg('状态：'+ (this.checked ? '达标' : '不达标'), {
                offset: '6px',
                time:500,
            });
            var kg=data.value; //将该值传到后端即可使用。（如，直接在ajax中传值）
            console.log(kg); 
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启，true或者false
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
        });
  });

改变前台展示的默认文本值：这个简单，（默认是on/off），直接通过属性lay-text改变，如下改为了达标与不达标

<input type="checkbox" name="xd1" id="xd1" lay-skin="switch" lay-text="达标|不达标" checked>