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>