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;
                
            }
        });
        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();

})

　　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>