垫树中复选框的逻辑

Question

试图弄清楚如何添加逻辑，如果用户单击父复选框，它将单击所有子复选框。如果未单击父项，则禁用该父项下的所有子项。如果父母打开，并且用户想要一个孩子，则将其设置为true。有关如何执行此操作的任何想法？谢谢！

.input-group {
    display: flex;
    flex-direction: column-reverse;
}

input:focus + label {
    color: green;
}

<div class="input-group">
    <input value="Input" />
    <label>Label</label>
</div>