JSFiddle - React, Tailwind, and code Playground

by Barbara Laird

HTML

<table id="mytable">
    <tr>
        <td>
            <label for="RoomNbr2" align="right">&nbsp;&nbsp;Room No 2
                <input type="checkbox" align="left" class="checkall" id="RoomNbr2" name="RoomNbr2">
            </label>
        </td>
        <td>
            <label for="PCNbr203" align="right">&nbsp;&nbsp;203
                <input type="checkbox" align="left" id="PCNbr203" name="PCNbr203" class="RoomNbr2">
            </label>
        </td>
        <td>
            <label for="PCNbr204" align="right">&nbsp;&nbsp;204
                <input type="checkbox" align="left" id="PCNbr204" name="PCNbr204" class="RoomNbr2">
            </label>
        </td>
    </tr>
    <tr>
        <td>
            <label for="RoomNbr3" align="right">&nbsp;&nbsp;Room No 3
                <input type="checkbox" align="left" class="checkall" id="RoomNbr3" name="RoomNbr3">
            </label>
        </td>
        <td>
            <label for="PCNbr310" align="right">&nbsp;&nbsp;310
                <input type="checkbox" align="left" id="PCNbr310" name="PCNbr310" class="RoomNbr3">
            </label>
        </td>
        <td>
            <label for="PCNbr320" align="right">&nbsp;&nbsp;320
                <input type="checkbox" align="left" id="PCNbr320" name="PCNbr320" class="RoomNbr3">
            </label>
        </td>
        <td>
            <label for="PCNbr340" align="right">&nbsp;&nbsp;340
                <input type="checkbox" align="left" id="PCNbr340" name="PCNbr340" class="RoomNbr3">
            </label>
        </td>
        <td>
            <label for="PCNbr350" align="right">&nbsp;&nbsp;350
                <input type="checkbox" align="left" id="PCNbr350" name="PCNbr350" class="RoomNbr3">
            </label>
        </td>
    </tr>
</table>

JavaScript

$('#mytable').on('click', '.checkall', function () {
    $('input.' + this.id).prop('checked', this.checked);
});
$('#mytable').on('click', function () {
    $('input.' + this.id).prop('checked', this.checked);
    $(".checkall").prop("indeterminate", true);
});