layui复选框使用介绍

<div>              <label><font>*</font>#(i18n.get('所属校区'))</label>              <div>                  <input>                   #for(campus : campusList)                      <input>                  #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>})

<style>.layui-form-checkbox span {        width:154px    }.layui-unselect.layui-form-checkbox{        margin-bottom:5px;    }    .layui-form-checkbox span{        color:#4C5277;    }    .layui-form-checked span{        color:#fff;    }    /*.layui-form-checked span{        background-color:#b31717!important;    }*/</style>