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>
    </tr>
    <tr>
        <td>
            <input type='checkbox' name='chkOrgRow' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' name='chkOrgRow' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' name='chkOrgRow' />
        </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