如何用Vanilla JavaScript选中特定父级复选框对应子级复选框

原代码的问题在于遍历了所有.eztext子级复选框，不管它属于哪个父分类，所以点击任意父级都会全选/全不选所有子级。要实现仅操作当前父级对应的子级，只需调整逻辑，定位到当前父级所在分类下的子复选框即可：

修改后的JavaScript代码 #

function toggle(parentCheckbox) {
    // 找到当前父级复选框所在的li容器
    const parentLi = parentCheckbox.closest('.category');
    // 筛选出当前父分类下仅有的子级复选框
    const childCheckboxes = parentLi.querySelectorAll('.subcategories .eztext');
    
    // 同步父级的选中状态到对应子级
    childCheckboxes.forEach(checkbox => {
        checkbox.checked = parentCheckbox.checked;
    });
}

逻辑说明 #

1. 用closest('.category')快速向上定位到当前父级复选框所在的<li>元素，比逐层调用parentNode更简洁可靠。
2. 限定在当前父容器内查找子复选框，避免影响其他分类的子项。
3. 遍历筛选后的子复选框，将它们的选中状态与父级保持一致。

额外提示 #

你当前HTML里存在重复id的问题（比如多个复选框id都是1或2），虽然不影响当前功能，但违反HTML规范，建议改成唯一id或移除不必要的id属性。

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