JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<table id="gvData">
    <tr>
        <th>
            <input type='checkbox' id='chkOrgheader' name='chkOrgheader' onclick='selectAll();' />
        </th>
        <th>
            Emp ID
        </th>
        <th>
            Emp Name
        </th>
        <th>
            Emp Salary
        </th>
        <th>
            Emp Address
        </th>
    
    </tr>
    <tr>
        <td>
            <input type='checkbox' name='chkOrgRow' />
        </td>
        <td>
            1
        </td>
        <td>
            Name 1
        </td>
        <td>
            $10000
        </td>
        <td>
            Some Address
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' name='chkOrgRow' />
        </td>
        <td>
            2
        </td>
        <td>
            Name 2
        </td>
        <td>
            $15000
        </td>
        <td>
            Some Address 2
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' name='chkOrgRow' />
        </td>
        <td>
            3
        </td>
        <td>
            Name 3
        </td>
        <td>
            $16600
        </td>
        <td>
            Some Address 3
        </td>
    </tr>
    
</table>

JavaScript

function selectAll() {

        var bool = $("#gvData input[id='chkOrgheader']").is(':checked');
        console.log(bool);
        //var isChecked = $(checked).attr('checked') ? true : false; //tired this on also by passing "this" to chkOrgheader onclick="selectAll(this)"

        if (bool) {
            $('input:checkbox[name="chkOrgRow"]').each(
                function () {
                    $(this).prop('checked', true);
                    console.log($(this).prop('checked'));
                });
        }
        else {
            $('input:checkbox[name="chkOrgRow"]').each(
                function () {
                    $(this).prop('checked',false);
                    console.log($(this).prop('checked'));
                });
        }
 }//End of select all

$(document).on('change','td input[type="checkbox"]',function(){
   if($(this).prop('checked'))
       alert($(this).parent('td').siblings('td:nth-child(4)').text())
});