JSFiddle - React, Tailwind, and code Playground

HTML

<table class="checkcontainer">
  <tr>
    <td>
      <input type='checkbox' name='filter' id="One" value="One" /> One
    </td>
    <td>
      <input type='checkbox' name='filter' id="Two" value="Two" /> Two
    </td>
    <td>
      <input type='checkbox' name='filter' id="Three" value="Three" /> Three
    </td>
  </tr>
</table>

<table class="datatbl" border=1>
  <tr>
    <th>No.</th>
    <th>Content</th>
    <th>Type</th>
  </tr>
  <tr data-rowtype="One">
    <td>1</td>
    <td>this is first row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>2</td>
    <td>this is second row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>3</td>
    <td>this is third row</td>
    <td>Three</td>
  </tr>
  <tr data-rowtype="One">
    <td>4</td>
    <td>this is fourth row</td>
    <td>One</td>
  </tr>
  <tr data-rowtype="Two">
    <td>5</td>
    <td>this is fifth row</td>
    <td>Two</td>
  </tr>
  <tr data-rowtype="Three">
    <td>6</td>
    <td>this is sixth row</td>
    <td>Three</td>
  </tr>

</table>
<div id="results">
  empty
</div>

JavaScript

window.console.clear();
$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  var all_checked_types = [];
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
});