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">
        <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']").click(function () {
        var cbValue = $(this).val();
        if ($(this).attr('checked')) {
                $(cbValue).show();
            }
            else {
                $(cbValue).hide();
            }
    });
    
    $('#CheckUncheck').toggle(function(){
        $("#CheckBoxDiv input[type='checkbox']").removeAttr('checked')
        $("#CheckBoxDiv input[type='checkbox']").trigger('click');
        $(this).val('Check All')
    },function(){
        $("#CheckBoxDiv input[type='checkbox']").attr('checked', 'checked').trigger('click');
        $(this).val('Uncheck all');        
    });
});