layui 체크 박스:
렌더링
layui 체크 박스, 마스터 체크 박스는 여러 슬레이브 체크 박스를 제어하며, 마스터 체크 박스와 슬레이브 체크 박스의 색상이 다릅니다
스타일 Layui 확인란은 선택한 후에만 사용할 수 있으므로 CSS 설정을 통해 직접 얻을 수 없습니다. js를 통해서만 동적으로 설정할 수 있습니다.
html 코드는 jfinal template
<div class="layui-inline"> <label class="layui-form-label"><font class="faiqi-font-red-star">*</font>#(i18n.get('所属校区'))</label> <div class="layui-input-block"> <input id="qx" lay-filter="allCheck" type="checkbox" value="" name="" title="#(i18n.get('全选'))" > #for(campus : campusList) <input type="checkbox" lay-filter="campus" class="campus" value="#(campus.id)" name="campusIds[#(campus.id)]" title="#(campus.campusName)" #(campusIdStr.contains(',' + campus.id + ',') ? 'checked="checked"':'')> #end </div> </div>
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;<br> } }); 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();<br><br>})
css
<style> .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; }*/ </style>
layui에 대한 자세한 내용은 layui 사용 튜토리얼 칼럼을 참고하세요.
위 내용은 Layui 체크박스 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!