Layui Table 点击行时选中单选框或复选框

转载自:https://www.cnblogs.com/XuYuFan/p/11733546.html

Layui Table点击行时选中单选框

//注:test是table原始容器的属性 lay-filter="对应的值"
layui.table.on('row(i_Layer_SearchResult_Table_Filter)', function (obj) {
    //选中行样式
    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    //选中radio样式
    obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
});

Layui Table点击行时选中复选框

$(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();
    }
});
//对td的单击事件进行拦截停止,防止事件冒泡再次触发上述的单击事件(Table的单击行事件不会拦截,依然有效)
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
    e.stopPropagation();
});
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现行点击选中复选框的效果,可以通过以下步骤来实现: 1. 在表头添加一个全选的复选框,并为其设置一个ID。 2. 在每一行的第一列添加一个复选框,并为其设置一个class,例如“check-box”。 3. 给表格绑定一个点击事件,在点击事件判断点击的元素是否为复选框或者全选的复选框,如果是,则执行对应的操作。 4. 当点击某一行时,获取该行的复选框元素,并设置其选中状态为true。 下面是一个示例代码: ```html <table class="layui-table" id="myTable"> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" id="checkAll"></th> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr class="tr_layui"> <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr class="tr_layui"> <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> </tbody> </table> <script> // 全选复选框点击事件 $('#checkAll').on('click', function() { if ($(this).is(':checked')) { $('.check-box').prop('checked', true); } else { $('.check-box').prop('checked', false); } }); // 行点击事件 $('.tr_layui').on('click', function() { // 判断是否为复选框或者全选复选框 if ($(event.target).is(':checkbox')) { return; } // 获取该行的复选框元素 var checkBox = $(this).find('.check-box'); // 判断该复选框是否已选中 if (checkBox.is(':checked')) { checkBox.prop('checked', false); } else { checkBox.prop('checked', true); } }); </script> ``` 在这段代码,我们首先给表头添加一个ID为“checkAll”的全选复选框,然后在每一行的第一列添加class为“check-box”的复选框。接着,我们给全选复选框和每行绑定点击事件,在事件判断点击的元素是否为复选框或者全选复选框,然后执行对应的操作。当点击某一行时,我们获取该行的复选框元素,并设置其选中状态。这样,就可以实现行点击选中复选框的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值