layui添加复选框_layui复选框使用介绍
layui復(fù)選框：
效果圖
layui復(fù)選框，一個(gè)主的復(fù)選框控制多個(gè)從復(fù)選框，主復(fù)選框和從復(fù)選框的顏色不一樣
layui復(fù)選框的樣式，都是在選然后才會(huì)有的，所以直接通過(guò)css設(shè)置就實(shí)現(xiàn)不了了。只可以通過(guò)js動(dòng)態(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) {
//動(dòng)態(tài)設(shè)置全選按鈕顏色，不可以這里設(shè)置，這里設(shè)置后，前端選然后不會(huì)有效果的，
//猜測(cè)原因是，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();
});
//查看是否被全選了，全選了，全選按鈕編輯的時(shí)候就是被選中中狀態(tài)
function initselect(){
let allSelect = true;
$(".campus").each(function(index, elem){
//每個(gè)checkbox添加點(diǎn)擊事件，如果點(diǎn)擊了，使得所有的按鈕中出現(xiàn)了不被選中的，那么全選按鈕就不被選中
if($(this).prop('checked') == false){
allSelect = false;
}
});
console.log("是否全選",allSelect)
$("#qx").prop('checked',allSelect);
form.render("checkbox");
//記得把設(shè)置事件放到渲染事件后
allCheckbox();
}
initselect();
//校區(qū)點(diǎn)擊事件，如果有校區(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
.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;
}*/
更多l(xiāng)ayui知識(shí)請(qǐng)關(guān)注layui使用教程欄目。
總結(jié)
以上是生活随笔為你收集整理的layui添加复选框_layui复选框使用介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python保存模型的路径怎么写_使用p
- 下一篇： maven 镜像_Maven（一）