Shulou(Shulou.com)06/03 Report--

这篇文章主要介绍了layui复选框怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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复选框怎么用"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.