layui复选框使用介绍

<div class="layui-inline">

              <label class="layui-form-label"><font class="faiqi-font-red-star">*</font>#(i18n.get('所属校区'))</label>

              <div class="layui-input-block">

                  <input id="qx" lay-filter="allCheck" type="checkbox" value="" name="" title="#(i18n.get('全选'))" >

                  #for(campus : campusList)

                      <input type="checkbox" lay-filter="campus" class="campus" value="#(campus.id)" name="campusIds[#(campus.id)]" title="#(campus.campusName)" #(campusIdStr.contains(',' + campus.id + ',') ? 'checked="checked"':'')>

                  #end

              </div>

            </div>

$(function(){

layui.use('form', function(){

    var form = layui.form;

    form.on("checkbox(allCheck)", function(data){

        console.log(data);

        console.log(data.elem.checked);

        if (data.elem.checked) {

            //动态设置全选按钮颜色，不可以这里设置，这里设置后，前端选然后不会有效果的，

            //猜测原因是，form.render("checkbox"); 导致的，设置后layui又渲染了，把我自己设置的颜色覆盖了。所以设置需要在渲染后再设置，就等于是用我的css覆盖了layui的css

            $(".campus").each(function(){

                $(this).prop('checked', true);

            });

        } else {

            $(".campus").each(function(){

                $(this).prop('checked',  false);

            });

        }

        form.render("checkbox");

       //渲染后设置我的颜色

        allCheckbox();

    });

    //查看是否被全选了，全选了，全选按钮编辑的时候就是被选中中状态

    function initselect(){

        let allSelect = true;

        $(".campus").each(function(index, elem){

            //每个checkbox添加点击事件，如果点击了，使得所有的按钮中出现了不被选中的，那么全选按钮就不被选中

            if($(this).prop('checked') == false){

                allSelect = false;<br>              

            }

        });

        console.log("是否全选",allSelect)

        $("#qx").prop('checked',allSelect);

        form.render("checkbox");

        //记得把设置事件放到渲染事件后

        allCheckbox();

    }

    initselect();

    //校区点击事件，如果有校区没有被选中，那么全选按钮就不能够显示选中状态

    form.on("checkbox(campus)", function(data){

        let checked = data.elem.checked;

        initselect();

    });

});

    //全选按钮和其他按钮的颜色不一样

    function allCheckbox(){

        qx1=$('#qx').next('div').children('span');

        if($('#qx').prop('checked')){

            //被选中就设置颜色

            qx1.css({

                'background-color':'#e4393c'

            })

        }

    }

    //初始化设置全选按钮的颜色，

    allCheckbox();<br><br>})