【Layui】------- input checkbox 开关联动操作示例代码

最新推荐文章于 2024-04-28 14:08:30 发布

皮皮冰要做大神

最新推荐文章于 2024-04-28 14:08:30 发布

阅读量715

点赞数

文章标签： layui javascript html checkebox

本文链接：https://blog.csdn.net/qq_38366657/article/details/130082276

版权

该文章展示了一个使用layui框架在HTML和JavaScript中实现多个checkbox开关联动的代码实例。当任一开关开启时，其他同名开关将自动关闭，同时处理开启数量为0时的特殊情况，防止全部关闭。

摘要由CSDN通过智能技术生成

1. 在多个地方使用checkbox 开关进行联动操作代码实例如下：

1.1 HTML 代码：


<span class="layui-form btn-edit-config">

<input type="checkbox" data-num="1" name="IS_CHANGING_OVER"lay-filter="IS_CHANGING_OVER" lay-skin="switch" lay-text="修改配置|取消配置">

</span>

<span class="layui-form btn-edit-config">

<input type="checkbox" data-num="2" name="IS_CHANGING_OVER"lay-filter="IS_CHANGING_OVER" lay-skin="switch" lay-text="修改配置|取消配置">

</span>
<span class="layui-form btn-edit-config">

<input type="checkbox" data-num="3" name="IS_CHANGING_OVER"lay-filter="IS_CHANGING_OVER" lay-skin="switch" lay-text="修改配置|取消配置">

</span>

2.2 JavaScript 代码：

   //修改配置操作
   layui.form.on('switch(IS_CHANGING_OVER)', function(data){
       var num=$(this).data("num");
       var val=this.checked?"1":"0";
       var _this=this;
       if(val=="1"){
         //当开启之后 其余开启的都关闭
          var inputList=$("input[name='IS_CHANGING_OVER'][data-num!='"+num+"']");
          for(var i=0;i<inputList.length;i++){
              inputList[i].checked=false;
          }
         layui.form.render("checkbox");//重新渲染开关
        }else{
          //找到开启的数量  
          var checkedLen=$(".btn-edit-config").find(".layui-form-onswitch").length;
          //开启数量为0 不能取消  
          if(checkedLen==0){
             _this.checked=true;
            layui.form.render("checkbox");//重新渲染开关
            layer.msg("不可取消!");
            return;
        }
       }
   });

2.2 最后示例图：