JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="items">
  <li class="item">
    <label>
      <input class="checkall" type="checkbox" name="item[]" id="checkAll">
      <span></span>
      <p>Check All Items</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="1">
      <span></span>
      <p>Learn HTML5.1</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="2">
      <span></span>
      <p>Learn PHP7</p>
    </label>
  </li>
  <li class="item">
    <label>
      <input type="checkbox" name="item[]" id="checkbox" value="4">
      <span></span>
      <p>Program a Website</p>
    </label>
  </li>
</ul>

JavaScript

$(".checkall").click(function (e) {
  $('input[type="checkbox"]').not(this).prop('checked', this.checked);
});