JSFiddle - React, Tailwind, and code Playground

HTML

<div class="group">
    <input type="checkbox" id="fruit-all" checked /><label for="fruit-all">All Fruit</label>
    <input type="checkbox" id="fruit-apple" /><label for="fruit-apple">Apple</label>
    <input type="checkbox" id="fruit-banana" /><label for="fruit-banana">Banana</label>
    <input type="checkbox" id="fruit-cherry" /><label for="fruit-cherry">Cherry</label>
    <input type="checkbox" id="fruit-date" /><label for="fruit-date">Date</label>
    <input type="checkbox" id="fruit-elderberry" /><label for="fruit-elderberry">Elderberry</label>
</div>

JavaScript

$('.group input').on('change', function() {
    var $inputs = $(this).siblings('input').add(this),
        $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');
    }
});