layui 结合form,table实现全选,反选

<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代码如下:

layui.use(['form', 'layer'], function() { //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer,form = layui.form; //独立版的layer无需执行这一句
    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');
    });
});

猜你喜欢

转载自blog.csdn.net/qq_26282869/article/details/80805375