JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<table id="domainTable"> <!-- Added ID -->
    <thead>
    <tr>
       <th>
         <!-- Added ID to below select box -->
         <input type="checkbox" name="selectAll" id="selectAllDomainList" />
        </th>
    </tr>
    </thead>
    <tbody>
         <tr>
            <td>
          <input type="checkbox" name="domainList" value="${domainInstance.id}"/>
            </td>
         </tr>
         <tr>
            <td>
          <input type="checkbox" name="domainList" value="${domainInstance.id}"/>
            </td>
         </tr>
         <tr>
            <td>
          <input type="checkbox" name="domainList" value="${domainInstance.id}"/>
            </td>
         </tr>
                 <tr>
            <td>
          <input type="checkbox" name="domainList" value="${domainInstance.id}"/>
            </td>
         </tr>
    </tbody>
<table>

JavaScript

$('#selectAllDomainList').click (function () {
     var checkedStatus = this.checked;
    $('#domainTable tbody tr').find('td:first :checkbox').each(function () {
        $(this).prop('checked', checkedStatus);
     });
});