导航
嘉兴网站建设公司亿捷网络

新闻资讯

学习行业知识,发布行业动态,分享网站开发经验
提供完善行业资讯及相关知识库,让服务直观

【前端日志】layui table点击行选中当前复选框


在一个网站建设过程中有一个需求,点击表格行选中该行的复选框,并且去掉其它行的复选框,网上找了很多资料都没有发现合适的,下面记录下代码。

 $(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);
});
微信二维码

15858330717
18267359737

客服热线:15858330717