JSFiddle - React, Tailwind, and code Playground

HTML

<label for="1Checkbox">1</label>
<input type="checkbox" ID="1Checkbox" class="TypeCheckbox" />
<label for="2Checkbox">2</label>
<input type="checkbox" ID="2Checkbox" class="TypeCheckbox" />
<label for="3Checkbox">3</label>
<input type="checkbox" ID="3Checkbox" class="TypeCheckbox" />
<label for="AllCheckbox">All</label>
<input type="checkbox" ID="AllCheckbox" />
<label for="NoneCheckbox">None</label>
<input type="checkbox" ID="NoneCheckbox" />

JavaScript

$(document).ready(function () {
    $('#AllCheckbox').click(function () {
        $('#NoneCheckbox').prop('checked', !this.checked);
        $('.TypeCheckbox').prop('checked', this.checked);
    });

    $('#NoneCheckbox').click(function () {
        $('#AllCheckbox').prop('checked', false);
        $('.TypeCheckbox').prop('checked', false);
    });

    $('.TypeCheckbox').click(function () {
        alert('Type checkbox was clicked');
        $('#AllCheckbox').prop('checked', false);
        $('#NoneCheckbox').prop('checked', false);
    });
});