layui结合form,table的全选、反选v1.0

最新推荐文章于 2024-05-22 16:42:57 发布

优小U

最新推荐文章于 2024-05-22 16:42:57 发布

阅读量1.1w

点赞数 4

分类专栏： layui Web前端文章标签： checkbox html 编辑器

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.csdn.net/zy1281539626/article/details/72413817

版权

Web前端同时被 2 个专栏收录

79 篇文章 8 订阅

订阅专栏

layui

9 篇文章 0 订阅

订阅专栏

layui结合form,table的全选、反选v1.0

需要引入layui.css和layui.js

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>

js代码如下：

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 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();
    }
});

第一段是全选和反选的功能，第二个是选单个的时候的效果，如果每个单独勾选，当全部选中时，总选开关会自动勾选，反之，如果没有全部选择，总选开关会自动取消选择。