layUI表格实现点击行复选框选中效果

最新推荐文章于 2023-07-25 14:35:45 发布

跟我聊天我会闯红灯

最新推荐文章于 2023-07-25 14:35:45 发布

阅读量3.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：效果自定义文章标签： layUI

本文链接：https://blog.youkuaiyun.com/yang651158/article/details/97484558

效果自定义专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在LayUI表格中通过点击行来选中对应复选框的方法，并提供了确保每次只能选中一行的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现点击行选中复选框的方法如下：

 $('body').on("click", ".layui-table-body table.layui-table tbody tr td", function () {
            if ($(this).attr("data-field") === "0") return;
            $(this).siblings().eq(0).find('i').click();
 });

另附上点击行选中复选框时其他行取消选中，即只能选中一行的效果

$('body').on("click", ".layui-table-body table.layui-table tbody tr td", function () {
            var objs = $($(this).parent()).siblings();
            $.each(objs,function(i,item){
                if ($(item).find('.layui-form-checked').length > 0) {
                    $(item).find("[data-field='0']").find('i').click();
                }
            })
            if ($(this).attr("data-field") === "0") return;
            $(this).siblings().eq(0).find('i').click();
        });