点击全选复选框克隆选中行至另一表格的问题排查

看起来你的代码已经搭好了基础逻辑，但在全选的双向处理（选中和取消状态）以及数据行的精准克隆上还有疏漏，导致现在只能克隆表头。下面是修复后的完整方案：

原代码的核心问题 #

1. 全选复选框只处理了选中的情况，完全没做取消选中的逻辑
2. 全选时克隆行的选择器可能没有精准定位到数据行（如果你的表头误放在了tbody里，就会克隆表头）
3. 取消全选时没有同步取消所有行复选框的选中状态，也没有移除目标表格的对应行

修复后的完整代码 #

var $checky = $("input[type=checkbox].checky");
var $sourceTableBody = $('#selection-form tbody');
var $targetTableBody = $("#tbl2 tbody");

// 全选/取消全选复选框逻辑
$("input:checkbox#checked").click(function(){
    var isChecked = $(this).is(':checked');
    
    // 同步所有行复选框的状态
    $checky.prop('checked', isChecked);
    
    if (isChecked) {
        // 克隆所有数据行到目标表格（确保只克隆带复选框的行，避免表头）
        $sourceTableBody.find('tr:has(.checky)').clone().appendTo($targetTableBody);
        calculateTotal();
    } else {
        // 取消全选时，清空目标表格的所有数据行
        $targetTableBody.empty();
        calculateTotal();
    }
});

// 单行复选框逻辑
$checky.click(function() {
    var $row = $(this).closest("tr");
    var rowIndex = $row.attr("data-index");
    
    if ($(this).is(":checked")) {
        // 克隆当前选中行到目标表格
        $row.clone().appendTo($targetTableBody);
        calculateTotal();
    } else {
        // 根据data-index移除目标表格中对应的行
        $targetTableBody.find("tr[data-index='" + rowIndex + "']").remove();
        calculateTotal();
    }
});

关键修复点说明 #

• 全选的双向逻辑：通过isChecked变量判断全选框的状态，分别处理选中和取消两种场景
• 精准克隆数据行：使用tr:has(.checky)过滤出包含行复选框的数据行，避免误克隆表头（如果你的表格结构是标准的thead放表头、tbody放数据行，也可以直接用$sourceTableBody.find('tr')）
• 取消全选时的清理：直接用$targetTableBody.empty()高效清空目标表格的所有数据行，比逐行移除更简洁
• 变量复用：把表格tbody元素缓存为变量，避免重复DOM查询，提升性能

额外注意事项 #

确保你的表格结构是标准的：

<!-- 源表格 -->
<table id="selection-form">
    <thead>
        <tr>
            <th><input type="checkbox" id="checked"></th>
            <!-- 其他表头列 -->
        </tr>
    </thead>
    <tbody>
        <tr data-index="1">
            <td><input type="checkbox" class="checky"></td>
            <!-- 数据列 -->
        </tr>
        <!-- 更多数据行 -->
    </tbody>
</table>

<!-- 目标表格 -->
<table id="tbl2">
    <thead>
        <!-- 目标表格表头 -->
    </thead>
    <tbody>
        <!-- 克隆的行将插入这里 -->
    </tbody>
</table>

这样调整后，全选时会正确克隆所有数据行到目标表格，取消全选时会清空目标表格并取消所有行复选框的选中状态，单行复选框的逻辑也能正常工作。

内容的提问来源于stack exchange，提问作者Gabriel Adewumi