layui復選框：

效果圖

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

layui復選框的樣式，都是在選然后才會有的，所以直接通過css設置就實現不了了。只可以通過js動態設置

html代碼使用了jfinal的模板

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

#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) {

//動態設置全選按鈕顏色，不可以這里設置，這里設置后，前端選然后不會有效果的，

//猜測原因是，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

.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;

}*/

更多layui知識請關注layui使用教程欄目。

總結

以上是生活随笔為你收集整理的layui添加复选框_layui复选框使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。