JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Checkbox Test</h2>

<form name="form1" method="post" action="">
    <p>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />Checkbox</label>
        <br>
        <label>
            <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />Checkbox</label>
        <br>
    </p>
</form>
<p><span id="chkAll">Check All</span> / <span id="unChkAll">Uncheck all</span>
</p>

CSS

span {
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

$('document').ready(function () {
    $('#chkAll').click(function () {
        $('input[type="checkbox"]').prop('checked', true);
    });
    $('#unChkAll').click(function () {
        $('input[type="checkbox"]').prop('checked', false);
    });
});