JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<h3><a href="javascript:void(0);" id="checkAll">Check</a> All</h3>
<hr/>

<input class="categories" type="checkbox" name="filter" value="Math" checked>Math<br/>
            <input class="categories" type="checkbox" name="filter" value="Science" checked>Science<br/>
            <input class="categories" type="checkbox" name="filter" value="Reading" checked>Reading

JavaScript

$('#checkAll').click(function()
{
  alert("checkAll was clicked!");
  console.log("Checkboxes has been refilled!");
  $(':checkbox.categories').prop('checked', $(this).checked); // re-check all checkboxes
  //$("input:checkbox").prop('checked', $(this).prop("checked"));
});