如何用jQuery将勾选checkbox对应最近TD值逗号拼接后传入URL

原有代码核心问题 #

1. 将#compare按钮的点击事件绑定放在了checkbox的change回调内，每次勾选/取消勾选都会重复绑定点击事件，会触发多次跳转逻辑，属于错误写法
2. 每次change触发时仅存储了当前操作的checkbox对应的值，没有收集所有已勾选条目的值

修正后代码 #

$(document).ready(function() {
  // 仅绑定一次按钮点击事件
  $("#compare[type='button']").click(function() {
    // 实时收集所有已勾选checkbox对应的TD值
    const selectedIds = $("input:checkbox:checked").map(function() {
      return $(this).closest('tr').find('td.views-field-nid').text().trim();
    }).get().join(',');

    // 非空判断避免无效跳转
    if (selectedIds) {
      window.location = 'URL/' + selectedIds;
    } else {
      alert('请至少选择一个条目后再操作');
    }
  });
});

逻辑说明 #

• 点击按钮时才实时筛选所有处于勾选状态的checkbox，不需要额外维护全局变量存储勾选状态
• map()方法遍历所有选中的checkbox，返回每个对应TD的文本内容，调用get()将jQuery集合转为普通数组后，用join(',')拼接为逗号分隔的字符串
• 新增非空判断，避免用户未选任何条目就点击按钮跳转无效链接的异常情况

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