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

ゝ一世哀愁。 2023-10-04 12:21 45阅读 0赞

**layui的开关按钮展示效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]  
**默认传递到后台的值如下：（默认选中时传值为on，默认值往往不符合我们的需要）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center 1]  
**改变传递到后台的值：**  
（方法一）在input中加一个属性。value=“1”，这样选中传递值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。全面，但略复杂，推荐。之后还需要自行将改变后的值传到后端。

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改变，如下改为了达标与不达标**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210501170206743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210501170242763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70#pic_center