JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<table class="style1" border="1">
    <tr>
        <td>
            Approve All<br />
            <input type="checkbox" name="approve" />
        </td>
        <td>
            Reject All<br />
            <input type="checkbox" name="reject" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee0" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
       </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee1" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="employee" class="approve" />
            <span>John</span>
        </td>
        <td>
            <input type="checkbox" name="employer" class="reject" />
       </td>
    </tr>
</table>

JavaScript

$(function(){
    $('input[name=approve]').click(function(){
        var checked = this.checked;

        $('.approve').each(function() {
            if($(this).closest('tr').find('.reject').prop('checked') == false)
                this.checked = checked;
        });
    });          
    
    $('input[name=reject]').click(function(){
        var checked = this.checked;
        
        $('.reject').each(function() {
            if($(this).closest('tr').find('.approve').prop('checked') == false)
                this.checked = checked;
        });
    });
    
    $('.approve').click(function() {
        $(this).closest('tr').find('.reject').prop('checked', !this.checked);
    });
    
     $('.reject').click(function() {
        $(this).closest('tr').find('.approve').prop('checked', !this.checked);
    });
});