jQuery父子选择器问题：无法访问首个父元素及下拉框联动勾选复选框

我来帮你搞定这个问题！你遇到的核心问题是在下拉框的change事件里，没法准确找到它所在行的复选框对吧？其实只要用jQuery的DOM遍历方法就能轻松解决，下面给你详细步骤：

第一步：修正事件绑定，传递当前元素 #

首先，你需要把下拉框的onchange事件里的函数改成传递当前元素this，这样在函数里才能拿到触发事件的下拉框本身：

<select id='stateChanger' onchange='stateChanger(this);'>
  <option>...</option>
  ...
</select>

第二步：编写jQuery遍历逻辑 #

在stateChanger函数里，我们可以通过以下步骤定位到目标复选框：

1. 用$(selectElement)把原生DOM元素转换成jQuery对象
2. 用closest('tr')向上查找最近的<tr>父元素（这比多次用parent()更可靠，哪怕以后DOM结构微调也不会失效）
3. 用find('input[type="checkbox"]')在当前行里找到复选框
4. 用prop('checked', true)设置复选框为勾选状态（这里一定要用prop而不是attr，因为复选框的勾选状态是DOM属性，prop才能正确修改）

完整的函数代码如下：

function stateChanger(selectElement) {
  // 包装当前下拉框为jQuery对象
  const $currentSelect = $(selectElement);
  // 定位到所在行的复选框并勾选
  $currentSelect.closest('tr').find('input[type="checkbox"]').prop('checked', true);
}

额外说明：为什么你的原代码找不到父元素？ #

你之前可能尝试了错误的遍历方式，比如直接用parent()只能拿到当前元素的直接父级（也就是<td>），而不是<tr>。closest()方法会从当前元素开始向上遍历DOM树，直到找到第一个匹配选择器的元素，完美适配这种找父级容器的场景。

完整示例代码 #

把这些整合起来，你的HTML和JS应该是这样的：

<tr>
  <td><input type='checkbox' /></td> <!-- 第一个复选框 -->
  <td>...其他内容...</td>
</tr>
<tr>
  <td><input type='checkbox' /></td> <!-- 第二个复选框 -->
  <td>
    <select id='stateChanger' onchange='stateChanger(this);'>
      <option value="0">请选择状态</option>
      <option value="1">状态A</option>
      <option value="2">状态B</option>
    </select>
  </td>
</tr>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function stateChanger(selectElement) {
  const $currentSelect = $(selectElement);
  $currentSelect.closest('tr').find('input[type="checkbox"]').prop('checked', true);
}
</script>

这样当你修改下拉框选项时，所在行的复选框就会自动被勾选啦！

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