JSFiddle - React, Tailwind, and code Playground

by Jay Blanchard

HTML

<input name="abbsmalone_select" class="selections" type="checkbox" />
<input name="cchkorea_select" class="selections" type="checkbox" />
<input name="amygrant_select" class="selections" type="checkbox" />
<input name="long_select" class="selections" type="checkbox" />

<input name="select_all" type="button" class="form_button2" value="select all" style="float: left;">
<input name="deselect_all" type="button" class="form_button2" value="deselect all" style="float: left;">

JavaScript

$(function() {

    function selectAll() {
        $('.selections').prop('checked', true);
    }
    function deselectAll() {
        $('.selections').prop('checked', false);    
    }
    
    $(document).on('click', 'input[name="select_all"]', function(){
        selectAll();
    });
    $(document).on('click', 'input[name="deselect_all"]', function(){
        deselectAll();
    });
});