JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input id="group_control" name="g" type="checkbox" />
  <label for="group_control">Group</label>
  <fieldset data-role="controlgroup" data-type="vertical" class="sub_cat">
    <input id="c01" name="c01" type="checkbox" class="cXX" />
    <label for="c01">A</label>
    <input id="c02" name="c02" type="checkbox" class="cXX" />
    <label for="c02">B</label>
    <input id="c03" name="c03" type="checkbox" class="cXX" />
    <label for="c03">C</label>
    <input id="c04" name="c04" type="checkbox" class="cXX" />
    <label for="c04">D</label>
    <input id="c05" name="c05" type="checkbox" class="cXX" />
    <label for="c05">E</label> 
  </fieldset>
</form>

JavaScript

$(document).ready(function () {
    $("#group_control").click(function() {
        //alert("Group checked? "+$('#group_control').is(':checked'));
        $("INPUT[class='cXX']").prop('checked', this.checked).checkboxradio("refresh");
    });
});