JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ButtonDiv">
    <input type="button" id="CheckUncheck" value="Uncheck All" />
</div>
<div id="CheckBoxDiv">
    <input type="checkbox" id="cb1" checked="checked" value="Cell1" />Checkbox 1
    <input type="checkbox" id="cb2" checked="checked" value="Cell2" />Checkbox 2
    <input type="checkbox" id="cb3" checked="checked" value="Cell3" />Checkbox 3
    <input type="checkbox" id="cb4" checked="checked" value="Cell4" />Checkbox 4</div>
<div>
    <table id="table" border='1'>
        <tr id="row">
            <td id="Cell1">1</td>
            <td id="Cell2">2</td>
            <td id="Cell3">3</td>
            <td id="Cell4">4</td>
        </tr>
    </table>
</div>

CSS

#table {
    border: 5px
}

JavaScript

$(document).ready(function () {
    
    $("#CheckBoxDiv input[type='checkbox']").change(function () {
        var cbValue = $(this).val();
        if ($(this).is(':checked')) {
            $("#" + cbValue).show();
        } else {
            $("#" + cbValue).hide();
        }
    });

    $('#CheckUncheck').toggle(function () {
        $("#CheckBoxDiv input[type='checkbox']").removeAttr('checked').trigger('change');
        $(this).val('Check All')
    }, function () {
        $("#CheckBoxDiv input[type='checkbox']").attr('checked', 'checked').trigger('change');

        $(this).val('Uncheck all');
    });
});