Layui数据表格单击一行选中复选框（每次只选中一项的复选框）

最新推荐文章于 2024-09-18 17:14:39 发布

少年请慢走

最新推荐文章于 2024-09-18 17:14:39 发布

阅读量5.2k

点赞数 5

分类专栏：前端基础文章标签： layui checkbox 选中

本文链接：https://blog.csdn.net/qq_39823114/article/details/100801362

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.Layui数据表格单击一行选中复选框（每次只选中一项的复选框）

$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
    var index = $(this).attr('data-index');
    var tableBox = $(this).parents('.layui-table-box');
    //存在固定列
    if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
        tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
    } else {
        tableDiv = tableBox.find(".layui-table-body.layui-table-main");
    }
    //获取已选中列并取消选中
    var trs = tableDiv.find(".layui-unselect.layui-form-checkbox.layui-form-checked").parent().parent().parent();
    for(var i = 0;i<trs.length;i++){
        var ind = $(trs[i]).attr("data-index");
        if(ind!=index){
            var checkCell = tableDiv.find("tr[data-index=" + ind + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length>0) {
                checkCell.click();
            }
        }
    }
    //选中单击行
    var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
    if (checkCell.length>0 & trs.length===1) {
        checkCell.click();
    }else{
    checkCell.click();
}
    //选中背景色
    $(this).siblings().css("background-color", "#FFFFFF");
    $(this).css("background-color", "#F2F2F2");
});
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    e.stopPropagation();
});

2.layui的table单击行勾选checkbox功能

可以连续点击多选

$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
        var index = $(this).attr('data-index');
        var tableBox = $(this).parents('.layui-table-box');
        //存在固定列
        if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
            tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
        } else {
            tableDiv = tableBox.find(".layui-table-body.layui-table-main");
        }
        var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
        if (checkCell.length>0) {
            checkCell.click();
        }
        //选中背景色
        $(this).siblings().css("background-color", "#FFFFFF");
        $(this).css("background-color", "#F2F2F2");
    });

    $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });