layui怎么做復(fù)選框？相信大家還沒學(xué)會這個技能，這篇文章運用了實例代碼展示，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)主營扶風網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),扶風h5成都微信小程序搭建,扶風網(wǎng)站營銷推廣歡迎扶風等地區(qū)企業(yè)咨詢

效果圖

layui復(fù)選框，一個主的復(fù)選框控制多個從復(fù)選框，主復(fù)選框和從復(fù)選框的顏色不一樣

layui復(fù)選框的樣式，都是在選然后才會有的，所以直接通過css設(shè)置就實現(xiàn)不了了。只可以通過js動態(tài)設(shè)置

html代碼使用了jfinal的模板

              *#(i18n.get('所屬校區(qū)'))
              

                   
                  #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) {
            //動態(tài)設(shè)置全選按鈕顏色，不可以這里設(shè)置，這里設(shè)置后，前端選然后不會有效果的，
            //猜測原因是，form.render("checkbox"); 導(dǎo)致的，設(shè)置后layui又渲染了，把我自己設(shè)置的顏色覆蓋了。所以設(shè)置需要在渲染后再設(shè)置，就等于是用我的css覆蓋了layui的css
            $(".campus").each(function(){
                $(this).prop('checked', true);
            });
        } else {
            $(".campus").each(function(){
                $(this).prop('checked',  false);
            });
        }
        form.render("checkbox");
       //渲染后設(shè)置我的顏色
        allCheckbox();
    });
 
    //查看是否被全選了，全選了，全選按鈕編輯的時候就是被選中中狀態(tài)
    function initselect(){
        let allSelect = true;
        $(".campus").each(function(index, elem){
            //每個checkbox添加點擊事件，如果點擊了，使得所有的按鈕中出現(xiàn)了不被選中的，那么全選按鈕就不被選中
            if($(this).prop('checked') == false){
                allSelect = false;
               
            }
        });
        console.log("是否全選",allSelect)
        $("#qx").prop('checked',allSelect);
        form.render("checkbox");
        //記得把設(shè)置事件放到渲染事件后
        allCheckbox();
    }
    initselect();
 
    //校區(qū)點擊事件，如果有校區(qū)沒有被選中，那么全選按鈕就不能夠顯示選中狀態(tài)
    form.on("checkbox(campus)", function(data){
        let checked = data.elem.checked;
        initselect();
    });
 
});
 
    //全選按鈕和其他按鈕的顏色不一樣
    function allCheckbox(){
        qx1=$('#qx').next('div').children('span');
        if($('#qx').prop('checked')){
            //被選中就設(shè)置顏色
            qx1.css({
                'background-color':'#e4393c'
            })
        }
    }
    //初始化設(shè)置全選按鈕的顏色，
    allCheckbox();

})

css

到此為止, 關(guān)于layui復(fù)選框有了一個基礎(chǔ)的認識, 但是對于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊。