如何在HTML表格中使用jQuery each()实现全选及单行数据填充

先假设你的HTML结构大致如下（如果结构有差异，调整选择器即可）：

<input type="checkbox" id="select_all"> 全选
<table class="item-table">
  <!-- 表头行 -->
  <tr>
    <th>选择</th>
    <th>库存数量</th>
    <th>退货数量</th>
  </tr>
  <!-- 数据行 -->
  <tr>
    <td><input type="checkbox" class="item_inline"></td>
    <td class="qty">15</td>
    <td><input type="text" name="rtn_qty[789]"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="item_inline"></td>
    <td class="qty">8</td>
    <td><input type="text" name="rtn_qty[101]"></td>
  </tr>
</table>

下面是用jQuery实现全选批量填充的代码：

// 绑定全选复选框的状态变化事件
$('#select_all').on('change', function() {
  const isChecked = $(this).is(':checked');
  // 遍历所有包含行内复选框的数据行
  $('.item-table tr:has(.item_inline)').each(function() {
    const $row = $(this);
    const qtyVal = $row.find('.qty').text().trim();
    const $rtnInput = $row.find('input[name^="rtn_qty["]');
    
    if (isChecked) {
      // 全选时填充数量，并勾选行内复选框
      $rtnInput.val(qtyVal);
      $row.find('.item_inline').prop('checked', true);
    } else {
      // 取消全选时清空输入框，并取消勾选行内复选框
      $rtnInput.val('');
      $row.find('.item_inline').prop('checked', false);
    }
  });
});

关键逻辑说明 #

• each()方法会遍历匹配到的每一行，回调函数里的$(this)就是当前处理的行元素
• 通过find()在当前行内定位.qty元素和退货数量输入框，确保只操作当前行的元素，不会搞混
• 同步行内复选框的状态，让全选/取消全选的操作更直观
• 如果你的表格行选择器需要调整，比如用特定的类名标记数据行，把tr:has(.item_inline)换成.data-row这类即可

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