layui table全选checkbox取值

layui table全选checkbox取值

<table id="table_list_table" class="layui-table" lay-filter="table_list"></table>



layui.use(['table', 'form'], function () {
        var $ = layui.$;
        var id_lists = [];

        var table = layui.table;
        table.render({
            elem: '#list_table',
            url: '/admin/aa/get_list/', //数据接口
            page: true, //开启分页
            limit: 20,
            limits: [20, 50, 100],
            title: '标题',
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            cols: [
                [
                    //表头
                    { type: 'checkbox', field: 'LAY_CHECKED', title: '序号', width: 90 },
                    { field: 'PKID', title: 'ID', width: 80, sort: true },
                    { field: 'TITLE', title: '标题' },

                ],
            ],done: function(res, curr, count){
                console.log(res);
                id_lists     = res.id_lists;//id lists 所有id
            }
        });


        var id_checkeds    = [];//所有选中的id
        //选择checkbox事件,获取选中的值
        table.on('checkbox(table_list)', function (obj) {
//            console.log(obj);
            var is_all          = obj.type == 'all' ? true : false;//是否全选
            var is_checked      = obj.checked;//是否选中
            if(is_all)//全选
            {
                if(is_checked) id_checkeds = id_lists;
                if(!is_checked) id_checkeds = [];
            }
            if(!is_all)//单选的时候  push或pop
            {
                var this_PKID = obj.data.PKID;
                if(!is_checked)
                {
                    id_checkeds.splice($.inArray(this_PKID, id_checkeds), 1);
                }
                if(is_checked)
                {
                    var index = $.inArray(this_PKID, id_checkeds);
                    if(index == -1)
                    {
                        id_checkeds.push(this_PKID);
                    }
                }
            }
            console.log(id_checkeds);
        });


});


 

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 中,如果要实现多个 checkbox全选/取消全选功能,可以使用 `form` 模块的 `on` 方法,绑定 `checkbox` 的点击事件,然后通过 `prop` 方法修改其他 checkbox 的选择状态。 示例代码如下: HTML: ```html <div class="layui-form-item"> <input type="checkbox" name="checkAll" lay-skin="primary" title="全选"> <div class="layui-input-block"> <input type="checkbox" name="like[1]" lay-skin="primary" title="复选框1"> <input type="checkbox" name="like[2]" lay-skin="primary" title="复选框2"> <input type="checkbox" name="like[3]" lay-skin="primary" title="复选框3"> </div> </div> ``` JavaScript: ```javascript //监听全选 form.on('checkbox(checkAll)', function(data){ var child = $(data.elem).parents('.layui-form').find('input[type="checkbox"]'); child.each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); //监听每个复选框 form.on('checkbox', function(data){ var child = $(data.elem).parents('.layui-form').find('input[type="checkbox"]'); var checkedChild = $(data.elem).parents('.layui-form').find('input[type="checkbox"]:checked'); if (checkedChild.length === child.length) { $(data.elem).parents('.layui-form').find('input[name="checkAll"]').prop('checked', true); } else { $(data.elem).parents('.layui-form').find('input[name="checkAll"]').prop('checked', false); } form.render('checkbox'); }); ``` 以上代码中,监听了全选复选框和每个子复选框的点击事件,通过 `prop` 方法修改其他 checkbox 的选择状态,最后通过 `form.render('checkbox')` 方法重新渲染 checkbox,使其生效。 希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值