>  기사  >  웹 프론트엔드  >  Layui 체크박스 사용 소개

Layui 체크박스 사용 소개

尚
앞으로
2019-11-27 13:09:455073검색

Layui 체크박스 사용 소개

layui 체크 박스:

렌더링

Layui 체크박스 사용 소개

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(&#39;所属校区&#39;))</label>
              <div class="layui-input-block">
                  <input id="qx" lay-filter="allCheck" type="checkbox" value="" name="" title="#(i18n.get(&#39;全选&#39;))" > 
                  #for(campus : campusList)
                      <input type="checkbox" lay-filter="campus" class="campus" value="#(campus.id)" name="campusIds[#(campus.id)]" title="#(campus.campusName)" #(campusIdStr.contains(&#39;,&#39; + campus.id + &#39;,&#39;) ? &#39;checked="checked"&#39;:&#39;&#39;)>
                  #end
              </div>
            </div>

layui 코드를 사용합니다.

$(function(){
 
layui.use(&#39;form&#39;, 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(&#39;checked&#39;, true);
            });
        } else {
            $(".campus").each(function(){
                $(this).prop(&#39;checked&#39;,  false);
            });
        }
        form.render("checkbox");
       //渲染后设置我的颜色
        allCheckbox();
    });
 
    //查看是否被全选了,全选了,全选按钮编辑的时候就是被选中中状态
    function initselect(){
        let allSelect = true;
        $(".campus").each(function(index, elem){
            //每个checkbox添加点击事件,如果点击了,使得所有的按钮中出现了不被选中的,那么全选按钮就不被选中
            if($(this).prop(&#39;checked&#39;) == false){
                allSelect = false;<br>               
            }
        });
        console.log("是否全选",allSelect)
        $("#qx").prop(&#39;checked&#39;,allSelect);
        form.render("checkbox");
        //记得把设置事件放到渲染事件后
        allCheckbox();
    }
    initselect();
 
    //校区点击事件,如果有校区没有被选中,那么全选按钮就不能够显示选中状态
    form.on("checkbox(campus)", function(data){
        let checked = data.elem.checked;
        initselect();
    });
 
});
 
    //全选按钮和其他按钮的颜色不一样
    function allCheckbox(){
        qx1=$(&#39;#qx&#39;).next(&#39;div&#39;).children(&#39;span&#39;);
        if($(&#39;#qx&#39;).prop(&#39;checked&#39;)){
            //被选中就设置颜色
            qx1.css({
                &#39;background-color&#39;:&#39;#e4393c&#39;
            })
        }
    }
    //初始化设置全选按钮的颜色,
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사:Laui 시작하기 요약다음 기사:Laui 시작하기 요약