在一个网站建设过程中有一个需求,点击表格行选中该行的复选框,并且去掉其它行的复选框,网上找了很多资料都没有发现合适的,下面记录下代码。
$(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); });