layui復選框怎么用

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

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復選框怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!