如何将选中的复选框值插入另一列，且取消勾选时同步移除对应内容

问题原因 #

你现有的逻辑没有区分复选框的选中/取消状态，不管用户勾选还是取消勾选，都会往已选列表追加商品编码，同时纯文本内容没有可识别的唯一标识，也没办法精准删除对应条目。

修复代码 #

$('input[type="checkbox"]').change(function() {
  const itemCode = $(this).closest("tr").find("td:nth-child(2)").text().trim();
  const $selectedList = $("#selecteditemlist");
  if($(this).is(":checked")) {
    // 选中时追加带唯一标识的条目
    $selectedList.append(`<div class="selected-item" data-code="${itemCode}">${itemCode}</div>`);
  } else {
    // 取消选中时删除对应条目
    $selectedList.find(`.selected-item[data-code="${itemCode}"]`).remove();
  }
});

适配500+条数据的优化建议 #

• 可以提前给每个复选框添加data-item-code属性存储对应商品编码，避免每次事件触发都遍历DOM读取td内容，既提升执行效率，也能避免后续表格列顺序调整后取值错误，取值代码可以简化为const itemCode = $(this).data('item-code')
• 如果有全选、反选等批量操作需求，建议每次操作后统一收集所有已选中的商品编码，一次性重绘已选列表，减少频繁DOM操作带来的性能损耗

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