1.html

<div class="layui-form">
<table class="layui-table">
    <thead>
        <tr>
            <td>
                <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
            </td>
            <td>ID</td>
            <td>角色名</td>
            <td>唯一标识</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody class="role_list">
        <tr>
            <td>
                <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
            </td>
            <td>1</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
    </tbody>
</table>
</div>

2.javascript

(1)
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');
});
(2)
form.on('checkbox(itemChoose)',function(data){
    var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
    var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
    if(sib == total){
        $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",true);
        form.render();
    }else{
        $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);
        form.render();
    }
});
javascript第一段是全选和反选的功能,第二个是选单个的时候的效果,如果每个单独勾选,当全部选中时,总选开关会自动勾选,反之,如果没有全部选择,总选开关会自动取消选择。

扫描二维码,在手机上阅读!