如何通过复选框获取表格某一行的数据？

原生JavaScript实现 #

单个复选框触发时获取行数据 #

给每个复选框绑定change事件，触发时通过closest('tr')定位到所在行，再提取行内单元格的内容：

// 给所有表格内的复选框绑定事件
document.querySelectorAll('table input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      // 获取当前复选框所属的行
      const row = this.closest('tr');
      // 提取行内所有单元格的文本并整理成数组
      const rowData = Array.from(row.querySelectorAll('td')).map(td => td.textContent.trim());
      console.log('选中行的数据:', rowData);
      // 此处可将数据存入数组或进行后续业务处理
    }
  });
});

批量获取所有已勾选行的数据 #

如果需要一次性获取所有选中行的数据，可遍历所有复选框，筛选出已勾选的项后提取对应行数据：

function getSelectedRows() {
  const selectedData = [];
  // 找到所有已勾选的复选框
  document.querySelectorAll('table input[type="checkbox"]:checked').forEach(checkbox => {
    const row = checkbox.closest('tr');
    const rowData = Array.from(row.querySelectorAll('td')).map(td => td.textContent.trim());
    selectedData.push(rowData);
  });
  return selectedData;
}

// 示例：点击按钮时批量获取
document.getElementById('getSelectedBtn').addEventListener('click', function() {
  const data = getSelectedRows();
  console.log('所有选中行的数据:', data);
});

jQuery实现（项目已引入jQuery时） #

jQuery写法更简洁，核心逻辑仍是通过closest('tr')定位行：

// 单个复选框触发时获取
$('table input[type="checkbox"]').on('change', function() {
  if ($(this).is(':checked')) {
    const rowData = $(this).closest('tr').find('td').map(function() {
      return $(this).text().trim();
    }).get();
    console.log('选中行的数据:', rowData);
  }
});

// 批量获取所有选中行
function getSelectedRows() {
  const selectedData = [];
  $('table input[type="checkbox"]:checked').each(function() {
    const rowData = $(this).closest('tr').find('td').map(function() {
      return $(this).text().trim();
    }).get();
    selectedData.push(rowData);
  });
  return selectedData;
}

实用优化技巧 #

• 给复选框添加data-*属性（如data-id="1001"），直接获取行的唯一标识，无需提取所有单元格内容，提升效率：

  <input type="checkbox" data-id="1001">
  

  JS中可通过this.dataset.id直接读取该标识。
• 若表格为动态渲染（异步加载数据），需使用事件委托确保新添加的复选框能触发事件：

  // 原生JS事件委托写法
  document.querySelector('table').addEventListener('change', function(e) {
    if (e.target.type === 'checkbox' && e.target.checked) {
      const row = e.target.closest('tr');
      const rowData = Array.from(row.querySelectorAll('td')).map(td => td.textContent.trim());
      console.log('选中行的数据:', rowData);
    }
  });
  

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