layui怎么做复选框
layui怎么做复选框?相信大家还没学会这个技能,这篇文章运用了实例代码展示,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
成都创新互联主营扶风网站建设的网络公司,主营网站建设方案,APP应用开发,扶风h5成都微信小程序搭建,扶风网站营销推广欢迎扶风等地区企业咨询
效果图
layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样
layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置
html代码使用了jfinal的模板
#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复选框有了一个基础的认识, 但是对于具体的使用方法还是需要多加巩固和练习,如果想了解更多相关内容,请关注创新互联行业资讯。
分享标题:layui怎么做复选框
文章分享:http://myzitong.com/article/gscjdh.html