在一个网站建设过程中有一个需求,点击表格行选中该行的复选框,并且去掉其它行的复选框,网上找了很多资料都没有发现合适的,下面记录下代码。
$(document).on("click", ".layui-table-body table.layui-table tbody tr", function() {
//重置选中状态
$("input[name=layTableCheckbox]").prop('checked',false);
$('.layui-table td .layui-form-checkbox').removeClass('layui-form-checked');
$.each(layui.table.cache.mainTable, function(i, item) {
item.LAY_CHECKED = false; //layui监听会用到
});
//选中当前复选框
var index = $(this).data('index');
$(this).find("input[name=layTableCheckbox]").prop('checked',true);
var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox");
checkbox.addClass('layui-form-checked');
(layui.table.cache.mainTable[index]).LAY_CHECKED = true;
});
//点击复选框取消冒泡(这里默认复选框在table第一列)
$(document).on("click", "tr td:first-child", function(e) {
stopBubble(e);
}); 