Heim > Web-Frontend > Layui-Tutorial > Einführung in die Verwendung des Laui-Kontrollkästchens

Einführung in die Verwendung des Laui-Kontrollkästchens

Freigeben: 2019-11-27 13:09:45
nach vorne
5119 Leute haben es durchsucht

Einführung in die Verwendung des Laui-Kontrollkästchens

Laui-Kontrollkästchen:

Rendering

Einführung in die Verwendung des Laui-Kontrollkästchens

Laui-Kontrollkästchen, ein Haupt-Kontrollkästchen. Das Kontrollkästchen steuert mehrere Slave-Kontrollkästchen. Die Farben des Master-Kontrollkästchens und des Slave-Kontrollkästchens sind unterschiedlich

Einführung in die Verwendung des Laui-Kontrollkästchens

Der Stil des Laui-Kontrollkästchens wird erst danach ausgewählt Es wird sein, daher kann dies nicht direkt über die CSS-Einstellungen erreicht werden. Es kann nur dynamisch über js eingestellt werden

HTML-Code verwendet Jfinal-Vorlage

<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>
Nach dem Login kopieren

Laui-Code

$(function(){
 
layui.use(&#39;form&#39;, 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(&#39;checked&#39;, true);
            });
        } else {
            $(".campus").each(function(){
                $(this).prop(&#39;checked&#39;,  false);
            });
        }
        form.render("checkbox");
       //渲染后设置我的颜色
        allCheckbox();
    });
 
    //查看是否被全选了,全选了,全选按钮编辑的时候就是被选中中状态
    function initselect(){
        let allSelect = true;
        $(".campus").each(function(index, elem){
            //每个checkbox添加点击事件,如果点击了,使得所有的按钮中出现了不被选中的,那么全选按钮就不被选中
            if($(this).prop(&#39;checked&#39;) == 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>})
Nach dem Login kopieren

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>
Nach dem Login kopieren

Für weitere Laui-Kenntnisse zahlen Sie bitte AchtungTutorial zur Verwendung von Laui Spalte.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des Laui-Kontrollkästchens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage