JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<tbody>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-pb">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-pi1">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-pi2">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-gp">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-ok">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-op">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-er">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>Tout sélectionner/désélectionner
      <input type="checkbox" checked="checked" id="show-all-points">
    </td>
  </tr>
</tbody>

JavaScript

$("#show-all-points").change(function () {
  $("input[name^='show-points-']")
    .prop("checked", this.checked);
});