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(){
     $('#CheckUncheck').toggle(function(){ 
        $('input:checkbox').removeAttr('checked');
            $(this).val('check all'); 
        },function(){
              $('input:checkbox').attr('checked','checked');
            $(this).val('uncheck all')      
        })
});