layui復(fù)選框怎么用

這篇文章主要介紹了layui復(fù)選框怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

layui復(fù)選框：

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

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

html代碼使用了jfinal的模板

<div class="layui-inline">              <label class="layui-form-label"><font class="faiqi-font-red-star">*</font>#(i18n.get('所屬校區(qū)'))</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) {            //動態(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;<br>                           }        });        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();<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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui復(fù)選框怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!