Introduction à l'utilisation de la case à cocher layui

case à cocher layui :

Rendu

case à cocher layui, une case à cocher principale La case contrôle plusieurs cases à cocher esclaves. Les couleurs de la case à cocher principale et des cases à cocher esclave sont différentes

Le style de la case à cocher layui n'est sélectionné qu'après Il y aura, il ne peut donc pas être obtenu directement via les paramètres CSS. Il ne peut être défini dynamiquement que via js

le code html utilise le modèle jfinal

<div class="layui-inline">
              <label class="layui-form-label"><font class="faiqi-font-red-star">*</font>#(i18n.get(&#39;所属校区&#39;))</label>
              <div class="layui-input-block">
                  <input id="qx" lay-filter="allCheck" type="checkbox" value="" name="" title="#(i18n.get(&#39;全选&#39;))" > 
                  #for(campus : campusList)
                      <input type="checkbox" lay-filter="campus" class="campus" value="#(campus.id)" name="campusIds[#(campus.id)]" title="#(campus.campusName)" #(campusIdStr.contains(&#39;,&#39; + campus.id + &#39;,&#39;) ? &#39;checked="checked"&#39;:&#39;&#39;)>
                  #end
              </div>
            </div>

le code 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(&#39;checked&#39;,allSelect);
        form.render("checkbox");
        //记得把设置事件放到渲染事件后
        allCheckbox();
    }
    initselect();
 
    //校区点击事件，如果有校区没有被选中，那么全选按钮就不能够显示选中状态
    form.on("checkbox(campus)", function(data){
        let checked = data.elem.checked;
        initselect();
    });
 
});
 
    //全选按钮和其他按钮的颜色不一样
    function allCheckbox(){
        qx1=$(&#39;#qx&#39;).next(&#39;div&#39;).children(&#39;span&#39;);
        if($(&#39;#qx&#39;).prop(&#39;checked&#39;)){
            //被选中就设置颜色
            qx1.css({
                &#39;background-color&#39;:&#39;#e4393c&#39;
            })
        }
    }
    //初始化设置全选按钮的颜色，
    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>

Pour plus de connaissances sur layui, veuillez payer attentiontutoriel d'utilisation de Lauiicolonne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!