Layui複選框的使用詳解

一、Layui複選框全選

Layui複選框是基於jQuery封裝的組件，使用起來非常方便。在實際應用中，我們常常需要實現全選或者全不選的功能。這時，我們可以通過以下代碼實現：

// 全選操作
form.on('checkbox(allChoose)', function(data){
    var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
    child.each(function(index, item){
        item.checked = data.elem.checked;
    });
    form.render('checkbox');
});

// 取消全選操作
form.on('checkbox(itemChoose)', function(data){
    var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
    var flag = true;
    child.each(function(index, item){
        if(!item.checked){
            flag = false;
        }
    });
    $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", flag);
    form.render('checkbox');
});

這段代碼實現了複選框全選和取消全選的功能，並且代碼非常簡潔明了。

二、Layui複選框去掉對勾

有時候我們需要在頁面中展示一些不可編輯的數據，此時複選框依然會有對勾，這時候我們可以使用Layui提供的form.render方法實現去掉對勾，代碼如下：

//隱藏複選框對勾
layui.use(['form'], function(){
    var form = layui.form;

    form.render('checkbox');
    $('table').on('mouseover','td div.layui-form-checkbox:first',function(){
        var $checkbox = $(this).find('span:first');
        $checkbox.css({'opacity': 0, 'filter': 'alpha(opacity=0)'});
    });
    $('table').on('mouseout','td div.layui-form-checkbox:first',function(){
        var $checkbox = $(this).find('span:first');
        $checkbox.css({'opacity': 1, 'filter': 'alpha(opacity=100)'});
    });
});

這段代碼使用了form.render方法，並且通過CSS實現了對勾的隱藏和顯示。

三、Layui複選框默認選中

有時候我們需要默認選中一些複選框，這時候我們可以設置checkbox組件的lay-skin屬性值為primary，並且給該複選框設置lay-checked屬性，代碼如下：

這段代碼中，我們給男性複選框設置了checked屬性並且設置了lay-skin為primary，實現了默認選中的效果。

四、Layui複選框批量刪除

在實際應用中，我們經常需要處理批量刪除的問題，複選框可以幫我們實現這個功能。在HTML中，我們可以這樣定義：

  批量刪除
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/311388.html