layui怎么做复选框

layui怎么做复选框？相信大家还没学会这个技能，这篇文章运用了实例代码展示，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联主营扶风网站建设的网络公司,主营网站建设方案,APP应用开发,扶风h5成都微信小程序搭建,扶风网站营销推广欢迎扶风等地区企业咨询

效果图

layui复选框，一个主的复选框控制多个从复选框，主复选框和从复选框的颜色不一样

layui复选框的样式，都是在选然后才会有的，所以直接通过css设置就实现不了了。只可以通过js动态设置

html代码使用了jfinal的模板

              *#(i18n.get('所属校区'))
              

                   
                  #for(campus : campusList)
                      
                  #end
              
            

layui代码

$(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;
               
            }
        });
        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();

})

css

到此为止, 关于layui复选框有了一个基础的认识, 但是对于具体的使用方法还是需要多加巩固和练习，如果想了解更多相关内容，请关注创新互联行业资讯。