JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grades">
    cascade1 <input type="checkbox" data-cascade="cascade1" value="1" />
    cascade2 <input type="checkbox" data-cascade="cascade2" />
    1 <input class="cascade1" type="checkbox" />
    1 <input class="cascade1" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    2 <input class="cascade2" type="checkbox"  />
    1 <input class="cascade1" type="checkbox"  />
</div>

JavaScript

$('input:checkbox[data-cascade]').change(function() {
    var selector = $(this).data('cascade'),
        isChecked = $(this).prop('checked');
    $('.'+selector).prop('checked', isChecked);
});