如何使用jQuery实现HTML表格父行勾选时自动勾选对应子行复选框

需求 #

• 制作带父子层级关系的HTML表格
• 勾选父行复选框时，自动选中当前父行下方、直到下一个父行出现前的所有子行复选框
• 取消勾选父行复选框时，对应范围内的子行复选框同步取消选中

原有代码失效原因 #

• 选择器拼写错误：HTML中定义的行标识是parent-tr/child-tr，jQuery代码中误写为parent-hr/child-hr，无法匹配到目标元素
• 违反HTML规范：同页面内id属性必须全局唯一，原有代码给多个父行、子行、复选框设置了重复id，会直接导致选择器匹配异常
• 范围逻辑错误：直接调用nextAll()匹配后续子行，不会在下一个父行位置截断，会误选其他父行下属的子行
• 逻辑缺失：没有处理父行取消勾选时，子行同步取消选中的场景

注意：标记同类型元素请使用class属性，不要重复使用id，避免出现不可预期的匹配问题

修正后代码 #

首先调整HTML结构，用class标记同类型行，移除重复id：

<table>
    <tbody>
        <!-- 父行 -->
        <tr class="parent-tr">
            <td><input type="checkbox" name="subject" class="parent-checkbox"></td>
            <td colspan="3">第一组父行</td>
        </tr>
        <!-- 子行 -->
        <tr class="child-tr">
            <td><input type="checkbox" name="ticker" class="child-checkbox"></td>
            <td>子项1-1</td>
        </tr>
        <tr class="child-tr">
            <td><input type="checkbox" name="ticker" class="child-checkbox"></td>
            <td>子项1-2</td>
        </tr>
        <tr class="child-tr">
            <td><input type="checkbox" name="ticker" class="child-checkbox"></td>
            <td>子项1-3</td>
        </tr>

        <!-- 父行 -->
        <tr class="parent-tr">
            <td><input type="checkbox" name="subject" class="parent-checkbox"></td>
            <td colspan="3">第二组父行</td>
        </tr>
        <!-- 子行 -->
        <tr class="child-tr">
            <td><input type="checkbox" name="ticker" class="child-checkbox"></td>
            <td>子项2-1</td>
        </tr>
        <tr class="child-tr">
            <td><input type="checkbox" name="ticker" class="child-checkbox"></td>
            <td>子项2-2</td>
        </tr>
        <tr class="child-tr">
            <td><input type="checkbox" name="ticker" class="child-checkbox"></td>
            <td>子项2-3</td>
        </tr>
    </tbody>
</table>

对应jQuery逻辑，遍历后续行时遇到下一个父行即终止，保证选中范围准确：

// 监听父行复选框状态变化，用事件委托兼容动态新增行
$('tbody').on('change', '.parent-checkbox', function () {
    // 获取当前父行复选框的选中状态
    const isChecked = $(this).prop('checked');
    // 从当前父行开始向后遍历所有兄弟行
    $(this).closest('.parent-tr').nextAll().each(function () {
        // 遇到下一个父行时终止遍历，不跨组选中
        if ($(this).hasClass('parent-tr')) {
            return false;
        }
        // 给子行复选框设置和父行一致的选中状态
        $(this).find('.child-checkbox').prop('checked', isChecked);
    });
});

逻辑说明 #

• 采用事件委托绑定事件，后续动态新增的表格行也能正常触发联动
• 遍历后续行时通过return false终止each循环，严格把选中范围限制在当前父行和下一个父行之间，不会跨组误选
• 同时支持勾选/取消勾选父行时的子行状态同步，不需要额外编写分支判断

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