JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter-grade">
    <label class="checkbox">
        <input type="checkbox" id="grade-all" name="grade[]" value="0" checked><b>All Grades</b>
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-9" name="grade[]" value="9">Grade 9
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-10" name="grade[]" value="10">Grade 10
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-11" name="grade[]" value="11">Grade 11
    </label>
    <label class="checkbox">
        <input type="checkbox" id="grade-12" name="grade[]" value="12">Grade 12
    </label>
</div>

JavaScript

$('.filter-grade input').on('change', function() {
    var $inputs = $(this).closest('div').find('input'),
        $checked = $inputs.filter(':checked'),
        $all = $inputs.eq(0),
        index = $inputs.index(this);
    
    (index === 0 ? $checked : $all).removeAttr('checked');
    
    if(index === 0 || $checked.length === 0) {
        $all.attr('checked', 'checked');
    }
});