JSFiddle - React, Tailwind, and code Playground

by priyam

HTML

<body>
    <table id="notificationsTableId" style="width: 1744px;">
        <thead>
            <tr role="row">
                <th rowspan="1" colspan="1" style="width: 30px;" aria-label="">
                    <input type="checkbox" id="selectall" onclick="selectAll();">Select all</input>
                </th>
                <th tabindex="0" rowspan="1" colspan="1" style="width: 203px;">Type</th>
                <th tabindex="0" rowspan="1" colspan="1" style="width: 354px;">Status</th>
            </tr>
        </thead>
        <tbody role="alert">
            <tr class="results-table-row odd">
                <td align="center">
                    <input type="checkbox" class="selectedId" name="selectedId" value="AF7F1FC4-A03B-11E2-A620-080027D207FA" onclick="resetSelectAll();" />
                </td>
                <td>Stop Noted Record</td>
                <td>Closed (No investigation required)</td>
            </tr>
            <tr class="results-table-row even">
                <td align="center">
                    <input type="checkbox" class="selectedId" name="selectedId" value="C6BA50E6-A03B-11E2-B3F6-080027D207FA" onclick="resetSelectAll();" />
                </td>
                <td>Stop Noted Record</td>
                <td>Open (New)</td>
            </tr>
            <tr class="results-table-row even odd">
                <td align="center" class=" ">
                    <input type="checkbox" class="selectedId" name="selectedId" value="C8EDD662-A03B-11E2-ABB2-080027D207FA" onclick="resetSelectAll();" />
                </td>
                <td class=" ">Stop Noted Record</td>
                <td class="  sorting_1">Open (New)</td>
            </tr>
        </tbody>
    </table>
</body>

JavaScript

function selectAll() {
    $('.selectedId').attr('checked', isChecked('selectall'));
}

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}


function resetSelectAll() {
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    if ($(".selectedId").length == $(".selectedId:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }
}