JSFiddle - React, Tailwind, and code Playground

by philphil

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");

    if($(this).prop('checked') === true) {
        $('input:checkbox.'+selector).prop('checked', true);
    } else {
        $('input:checkbox.'+selector).prop('checked', false);
    }
});