JSFiddle - React, Tailwind, and code Playground

by dhana36

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').removeAttr('checked');
        $('.TypeCheckbox').prop('checked', 'checked');
    });

    $('#NoneCheckbox').click(function () {
        $('#AllCheckbox').removeAttr('checked');
        $('.TypeCheckbox').removeAttr('checked');
    });

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