HTML表格实现勾选首个复选框自动选中下一个的方法咨询

我来帮你搞定这个需求！你想要实现的是：每行第一个复选框被勾选/取消时，自动同步该行第二个复选框的状态，而且表格行数是动态生成的对吧？先看看你现有代码里的几个问题：

• 重复的ID：你给每行第一个复选框都设置了id="checkFirst"，但HTML里ID必须是唯一的，重复ID会导致JS选择器出错，也不符合规范，应该改成class（比如class="checkFirst"）。
• 逻辑定位错误：原来的toggle函数遍历所有name="row"的复选框，还尝试用index匹配，这会操作到所有行的目标复选框，而不是当前点击的那一行，逻辑完全跑偏了。

修正后的解决方案 #

我们用jQuery的事件委托来处理动态生成的行（因为你用了data-bind="foreach: list"，行是动态渲染的），这样不管新增多少行，事件都能生效。

完整代码示例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody data-bind="foreach: list">
  <tr>
    <td><input type="checkbox" class="checkFirst" /></td>
    <td><input type="checkbox" name="row"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
</tbody>

<script>
$(function() {
  // 监听所有.checkFirst复选框的状态变化（包括动态生成的）
  $(document).on('change', '.checkFirst', function() {
    // 找到当前复选框所在的行，再定位到该行的name="row"的复选框
    $(this).closest('tr').find('input[name="row"]').prop('checked', this.checked);
  });
});
</script>

代码解释 #

1. 事件委托：$(document).on('change', '.checkFirst', ...) 会监听文档内所有.checkFirst元素的change事件，哪怕这些元素是后来动态添加的，也能触发事件，完美适配你的动态表格场景。
2. 定位当前行：$(this).closest('tr') 会从当前点击的复选框开始，向上查找最近的<tr>元素，也就是它所在的那一行。
3. 同步状态：.find('input[name="row"]') 在当前行里找到第二个复选框，然后用.prop('checked', this.checked)把它的选中状态设置成当前第一个复选框的状态，实现联动。

如果你的表格是静态的（不是动态生成的），也可以把事件委托换成直接绑定：

$('.checkFirst').on('change', function() {
  $(this).closest('tr').find('input[name="row"]').prop('checked', this.checked);
});

但因为你用了foreach动态渲染行，事件委托是更稳妥的选择。

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