本文介绍在Layui表格中实现单击行自动勾选复选框的方法。核心思路是通过jQuery监听表格行点击事件，获取行索引并定位到对应的checkbox控件。针对存在固定列导致checkbox位于不同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();
}
});
$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
e.stopPropagation();
});Layui Table单击行勾选实现原理
核心思路是为表格的行绑定单击事件，通过JavaScript操作DOM元素来完成勾选逻辑。
第一步，获取当前行的data-index属性值，该值用于后续定位具体的复选框控件。
第二步，判断表格是否存在固定列。若存在固定列，复选框会渲染在独立的固定列table中，因此需要优先从该区域查找；否则从普通表格区域查找。
第三步，结合table容器和data-index，通过CSS选择器“td div.laytable-cell-checkbox div.layui-form-checkbox I”定位到具体的checkbox元素。若找到该元素，则模拟触发其点击事件。
第四步，拦截td层面的单击事件并停止冒泡，防止事件再次向上触发导致上述逻辑重复执行。第五步，将此段代码在页面初始化完成后执行一次即可生效。
实现后的效果是：用户单击表格任意行时，该行对应的复选框会自动处于选中或取消选中的状态。
以上即为Layui表格单击行勾选复选框功能的完整实现方法，供开发者参考使用。