使用JQuery获取勾选复选框时对应前置元素的值（多行场景）

你的代码里DOM遍历路径有问题，导致拿不到目标输入框的值。因为.row_checkbox的父元素是<label>，直接用parent().prev()定位不到前一个<td>，应该先找到当前复选框所在的表格行，再在该行内查找目标输入框，这种方式对可重复行的结构兼容性更强。

修改后的JavaScript代码：

$(document).on('click', '.row_checkbox', function() {
  if (this.checked) {
    console.log("checked");
    // 先找到当前复选框所在的表格行，再在该行内找row_price输入框
    var unit_price = $(this).closest('tr').find('.row_price').val();
    console.log(unit_price);
  }
});

对应的HTML结构可保持不变（也可添加重复行测试）：

<table>
  <tr>
    <td>
      <input type="text" class="form-control row_price" name="order_innerprice[]">
    </td>
    <td>
      <label class="checkbox checkbox-custom-alt">
        <input type="checkbox" class="form-control row_checkbox" name="order_checkbox[]"><i></i>
     </label>
    </td>
  </tr>
  <!-- 可重复添加的行示例 -->
  <tr>
    <td>
      <input type="text" class="form-control row_price" name="order_innerprice[]">
    </td>
    <td>
      <label class="checkbox checkbox-custom-alt">
        <input type="checkbox" class="form-control row_checkbox" name="order_checkbox[]"><i></i>
     </label>
    </td>
  </tr>
</table>

核心思路 #

用closest('tr')快速定位到当前复选框所在的表格行，再通过find('.row_price')在该行内筛选目标输入框。这种方式不依赖DOM节点的层级嵌套，就算后续行内元素结构有小调整（比如在td里新增其他标签），也不会影响值的获取，非常适合可重复行的场景。

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