JSFiddle - React, Tailwind, and code Playground

by Jaimin Pandya

HTML

<div id="ButtonDiv">
    <input type="button" id="CheckUncheck" data-id="uncheck" value="Uncheck All"/>
</div>

<div id="CheckBoxDiv">
    <input type="checkbox" id="cb1"  value="Cell1" /> Checkbox 1
    <input type="checkbox" id="cb2"  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(){
    
   
    alert($("#CheckBoxDiv input[type='checkbox']").length+'========'+$("#CheckBoxDiv input[type='checkbox']:checked").length);
    
    if($("#CheckBoxDiv input[type='checkbox']").length == $("#CheckBoxDiv input[type='checkbox']:checked").length)
    {
        $('#CheckUncheck').attr('Value','Uncheck All');
         $('#CheckUncheck').attr('data-id','uncheck');
    }
    else
    {
        $('#CheckUncheck').attr('Value','Check All');
         $('#CheckUncheck').attr('data-id','check');
    }
    
    $("#CheckBoxDiv input[type='checkbox']").click(function () {
        var cbValue = $(this).val();
        if ($(this).attr('checked')) {
                $(cbValue).show();
            }
            else {
                $(cbValue).hide();
            }
    });
    
    $('#CheckUncheck').click(function(){

       if( $('#CheckUncheck').attr('data-id') == "check")
       {     
           
                       
        $("#CheckBoxDiv input[type='checkbox']").removeAttr('checked');
        $("#CheckBoxDiv input[type='checkbox']").trigger('click');
           
        $(this).val('Uncheck All');  
        $(this).attr('data-id','uncheck');
           
     
         
        }
        else
        {           

       $("#CheckBoxDiv input[type='checkbox']").attr('checked','checked').trigger('click');
            

        $(this).val('Check All');
        $(this).attr('data-id','check');
        }

       
    });
    
    
});