其他分享
首页 > 其他分享> > 单选、多选表格行,获取选中行的id

单选、多选表格行,获取选中行的id

作者:互联网

1. 表格结构

2. jQuery代码

// 全选和全不选点击事件
    $('#allCkb').click(function () {
        if ($('#allCkb').prop('checked') == true) {
            $('[name=ckb]:checkbox').prop("checked", this.checked);
            var ckbs = $("input[name=" + 'ckb' + "]:checked");
            ckbs.each(function () {
                var tr = $(this).parent().closest("tr");
                var tdArr = tr.find("td");
                var id = tr.attr("id");
                selectedTaskId.push(id)
            });
            console.log("全选了,id是:" + selectedTaskId);
        } else {
            var ckbs = $("input[name=" + 'ckb' + "]:checked");
            ckbs.each(function () {
                var tr = $(this).parent().closest("tr");
                var tdArr = tr.find("td");
                var id = tr.attr("id");
                selectedTaskId = selectedTaskId.filter(item => item != id);
            });
            console.log("全不选了,id是:" + selectedTaskId);
            $('[name=ckb]:checkbox').prop("checked", false);
        }

    })

// checkbox点击事件
    $('[name=ckb]:checkbox').change(function () {
        var id = $(this).parent().closest("tr").attr("id");
        if ($(this).prop('checked') == true) {
            selectedTaskId.push(id);
            console.log("点了" + selectedTaskId);
        } else {
            selectedTaskId = selectedTaskId.filter(item => item != id);
            console.log("取消" + selectedTaskId);
        }

    });

3.效果

标签:checked,多选,selectedTaskId,tr,单选,var,id,name
来源: https://www.cnblogs.com/yddwinter/p/16223495.html