网站界面设计需求,如何开网店做电商,开源购物系统,网站流量利用layui复选框#xff1a;效果图layui复选框#xff0c;一个主的复选框控制多个从复选框#xff0c;主复选框和从复选框的颜色不一样layui复选框的样式#xff0c;都是在选然后才会有的#xff0c;所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用了jfin…layui复选框效果图layui复选框一个主的复选框控制多个从复选框主复选框和从复选框的颜色不一样layui复选框的样式都是在选然后才会有的所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用了jfinal的模板*#(i18n.get(所属校区))#for(campus : campusList)#endlayui代码$(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使用教程栏目。
