【html】Layui 静态表格复选框全选

html

<table class="layui-table" >
    <thead>
            <tr>
                <th><input type="checkbox" name=""    lay-skin="primary" lay-filter="allChoose"></th>
                <th>id</th>
            </tr>
            </thead>
            <tbody>
            {foreach $data_list as $key=>$vo }
            <tr>
                <td><input type="checkbox" name="id_array[]"  value="{$vo.id}"  lay-skin="primary" lay-filter="itemChoose" ></td>
                <td>{$vo.id}</td>
            </tr>
            {/foreach}
    </tbody>
</table>

js

<script>
    layui.use(['form', 'layedit','jquery','element','table'], function() {
        var form = layui.form;
        table = layui.table;
        form.render();
        //全选or 取消全选
        form.on('checkbox(allChoose)', function(data){
            //所有
            var all_child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            //data.elem.checked 值为 true 或者 false
            all_child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');

            //获取已选中
            var checked_child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked');
            layer.msg('选中了：'+ checked_child.length + ' 个');
            //获取选中的值
            var arr_box = [];
            checked_child.each(function() {
                arr_box.push($(this).val());
            });
            console.log(arr_box.toString());
        });

        //全选和部分选中时候,表头全选按钮的样式变化
        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);
            } else {
                $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);
            }
            form.render('checkbox');

            //获取已选中
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked');
            layer.msg('选中了：'+ child.length + ' 个');
            //获取选中的值
            var arr_box = [];
            child.each(function() {
                arr_box.push($(this).val());
            });
            console.log(arr_box.toString());
        });

    });

</script>