JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<ul>
  <li><a href="#" id="all" data-filter="all">All</a></li>
  <li><a href="#" id="on" data-filter="on">On</a></li>
  <li><a href="#" id="off" data-filter="off">Off</a></li>
</ul>

<table>
  <tr>
    <td class="parent">
      <input type="checkbox" class="box">
      <label>One</label>
    </td>
  </tr>
  <tr>
    <td class="parent">
      <input type="checkbox" class="box">
      <label>Two</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="box">
      <label>Three</label>
    </td>
  </tr>
</table>

CSS

ul li { 
  float: left;
  text-decoration: none;
  display: inline-block;
  padding: 5px;
}
table {
   clear: both;
}

JavaScript

$("#all").click(function () {
 alert('here');
     $('input:checkbox').not(this).prop('checked', this.checked);
 });