hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开发】layui复选框运用引见

2019-11-29后端开发ki4网13°c
A+ A-

layui复选框:

结果图

layui复选框,一个主的复选框掌握多个从复选框,主复选框和从复选框的色彩不一样

layui复选框的款式,都是在选然后才会有的,所以直接经由过程css设置就完成不了了。只可以经由过程js动态设置

html代码运用了jfinal的模板

<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>

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

css

<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>

更多layui学问请关注layui运用教程栏目。

以上就是layui复选框运用引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开发】layui复选框运用引见

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>