JSFiddle - React, Tailwind, and code Playground

by mdsahib

HTML

<div class="filter-grade">
    <label class="checkbox">
        <input class="group-all" 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 :checkbox').filter("[class!='group-all']").on('change', function() {
      var parentDiv=$(this).parent().parent();
    if($(':checked',parentDiv).length<1){
        $('.group-all',parentDiv ).attr('checked',true);
    }
    else $('.group-all',parentDiv ).attr('checked',false);
 });

$('.filter-grade :checkbox').filter("[class='group-all']").on('change', function() {
    var parentDiv=$(this).parent().parent();
    $('input',parentDiv ).attr('checked',false);
    $(this).attr('checked',true);
 });