<table>
  <thead>
    <tr>
      <th>
        <input type="checkbox" name="selectAllRows" value="1" class="selectAllRows" onclick="[...closest('table').querySelectorAll('tbody [class=selectRow]')].forEach(box=>box.checked=checked)">
      </th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="selectRow[]" value="1" class="selectRow">
      </td>
      <td>John Smith</td>
      <td>john@smith.com</td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" name="selectRow[]" value="2" class="selectRow">
      </td>
      <td>Sarah Jones</td>
      <td>sarah@jones.com</td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" name="selectRow[]" value="3" class="selectRow">
      </td>
      <td>Jane Williams</td>
      <td>jane@williams.com</td>
    </tr>
  </tbody>
</table>
th {
  text-align: left;
  border-bottom: 1px solid #000;
}

tr:has(.selectRow:checked) > td {
  background-color: #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.