如何通过父ID实现点击父复选框选中所有子复选框（jQuery）

针对你遇到的问题——点击“Parent X check all”复选框时选中对应分组的所有子复选框，这里提供两种可靠的jQuery解决方案，完美适配你的HTML结构：

方案一：基于DOM结构（推荐，不依赖ID命名） #

这种方案利用你HTML中“父复选框是每个div的第一个复选框，子复选框与父复选框同属一个div”的固定结构，无需依赖ID命名规则，兼容性和健壮性更强：

<!-- 先引入jQuery（如果页面还没引入的话） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
$(document).ready(function() {
    // 给每个div里的第一个复选框（父级）绑定状态改变事件
    $('div > input[type="checkbox"]:first-child').on('change', function() {
        // 获取父复选框的当前选中状态
        const isParentChecked = $(this).prop('checked');
        // 同步当前div内所有兄弟复选框（子级）的选中状态
        $(this).siblings('input[type="checkbox"]').prop('checked', isParentChecked);
    });
});
</script>

<!-- 你的原始HTML结构 -->
<div> 
    <input type="checkbox" id="choice_5621_1"> Parent 1 check all <br /> 
    <input type="checkbox" id="choice_5621_1_1"> <br /> 
    <input type="checkbox" id="choice_5621_1_2"> <br /> 
    <input type="checkbox" id="choice_5621_1_3"> 
</div> <br /> <br /> 
<div> 
    <input type="checkbox" id="choice_5621_2"> Parent 2 check all <br /> 
    <input type="checkbox" id="choice_5621_2_1"> <br /> 
    <input type="checkbox" id="choice_5621_2_2"> <br /> 
    <input type="checkbox" id="choice_5621_2_3"> 
</div>

逻辑说明： #

• $('div > input[type="checkbox"]:first-child') 精准定位每个div里的第一个复选框（即父级复选框）
• 当父复选框的选中状态改变时，通过.siblings()找到同一div内的所有子复选框，一键同步它们的checked状态

方案二：基于ID命名规则 #

如果你的ID命名规则固定（父ID格式为choice_xxx_x，子ID为choice_xxx_x_y），可以用ID前缀匹配的方式实现：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
$(document).ready(function() {
    // 筛选出所有父复选框（ID分割后数组长度为3，比如"choice_5621_1"分割后是3个元素）
    $('input[type="checkbox"]').filter(function() {
        return this.id.split('_').length === 3;
    }).on('change', function() {
        const parentId = this.id;
        const isChecked = $(this).prop('checked');
        // 选中所有ID以父ID加下划线开头的子复选框
        $(`input[type="checkbox"][id^="${parentId}_"]`).prop('checked', isChecked);
    });
});
</script>

<!-- 你的原始HTML结构 -->
<div> 
    <input type="checkbox" id="choice_5621_1"> Parent 1 check all <br /> 
    <input type="checkbox" id="choice_5621_1_1"> <br /> 
    <input type="checkbox" id="choice_5621_1_2"> <br /> 
    <input type="checkbox" id="choice_5621_1_3"> 
</div> <br /> <br /> 
<div> 
    <input type="checkbox" id="choice_5621_2"> Parent 2 check all <br /> 
    <input type="checkbox" id="choice_5621_2_1"> <br /> 
    <input type="checkbox" id="choice_5621_2_2"> <br /> 
    <input type="checkbox" id="choice_5621_2_3"> 
</div>

逻辑说明： #

• 通过filter()方法筛选出符合父ID格式的复选框
• 利用属性选择器[id^="${parentId}_"]匹配所有以父ID加下划线开头的子复选框，同步它们的选中状态

额外优化（可选） #

如果需要实现“子复选框全选时自动选中父复选框”的反向交互逻辑，可以添加以下代码（以方案一为例）：

// 子复选框状态改变时，检查是否全选并同步父复选框状态
$('div > input[type="checkbox"]:not(:first-child)').on('change', function() {
    const $parentCheckbox = $(this).closest('div').find('input[type="checkbox"]:first-child');
    const $allChildren = $(this).siblings('input[type="checkbox"]').addBack();
    const allChecked = $allChildren.filter(':checked').length === $allChildren.length;
    $parentCheckbox.prop('checked', allChecked);
});

这样可以让整个复选框组的交互更完整流畅。

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