JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <button type="button" id="all">check all</button>
    <button type="button" id="none">check none</button>
    <input type="checkbox" value="one" />
    <input type="checkbox" value="two" />
    <input type="checkbox" value="three" />
</form>

JavaScript

(function($, document) {
    $('#all').on('click', function() {
        $('input', $(this).parent()).prop('checked', 'checked').change();
    });
    $('#none').on('click', function() {
        $('input', $(this).parent()).removeProp('checked').change();
    });

    $('input').on('change', function() {
        alert(this.value);
    });
}(jQuery, document));