CheckBox Group

Structure

Click to copy
<div class="checkboxes-group" data-label="matchThis-with-dataLabel" style="display: flex; flex-direction: column;">
    <label>
    <input type="checkbox" class="checkbox checkbox-main" >Checkbox Group</label>
    <div class="checkboxes-group__child child-matchThis-with-dataLabel" style="display: flex; flex-direction: column;">
    <label>
        <input type="checkbox" class="checkbox" >Feature 1</label>
    <label>
        <input type="checkbox" class="checkbox" >Feature 2</label>
    <label>
        <input type="checkbox" class="checkbox" >Feature 3</label>
    </div>
</div>

Java Script

Click to copy
<script>
jQuery(document).on("click", ".checkboxes-group .checkbox-main", function () {
        
        var parent_elem = jQuery(this).parents(".checkboxes-group").data("label");
        
        jQuery(this).is(":checked") ? jQuery(".child-"+parent_elem).find(".checkbox").prop("checked", !0) : jQuery(".child-"+parent_elem).find(".checkbox").prop("checked", !1);

});
</script>