JSFiddle - React, Tailwind, and code Playground

HTML

<input id="option1btn" type="checkbox" value="option1">
<input id="option2btn" type="checkbox" value="option2"> 
<input id="option3btn" type="checkbox" value="option3"> 
<input id="option4btn" type="checkbox" value="option4">

<table id="optionTable">
    <tr class="option1">
        <td>option1</td>
    </tr>
    <tr class="option1">
        <td>option1</td>
    </tr>
    <tr class="option2 option4">
        <td>option2 option4</td>
    </tr>
    <tr class="option1 option4">
        <td>option1 option4</td>
    </tr>
    <tr class="option4">
        <td>option4</td>
    </tr>
    <tr class="option1 option3 option4">
        <td>option1 option3 option4</td>
    </tr>
    <tr class="option4">
        <td>option4</td>
    </tr>
</table>

CSS

.option1,.option2,.option3,.option4 {
  display: none;
}
.show {
  display: block;
}
.

JavaScript

var $options = $('[id^="option"]');

$options.on('change', function() {
  var $elementsToToggle = $('.' + this.value);
  if (this.checked) {
    $elementsToToggle.show();
  } else {
    $elementsToToggle.each(function() {
      var hide = true,
          elementToToggle = this;
      
      $options.each(function() {
        var optionClass = this.value,
            optionValue = this.checked;
        if (elementToToggle.classList.contains(optionClass) && optionValue)
          hide = false;
      });
      
      if (hide === true)
        $(elementToToggle).hide();
    });
  }
});