I have a table with a bunch of states and it has two columns that display whether the event is family friendly and/or Spanish speaking. I have a dropdown selector with states listed and two checkboxes that should filter the matching rows that are family friendly and/or Spanish speaking.

My current dropdown filters out states to show only the state selected. My two checkboxes individually filter the rows to display those that are family friendly or Spanish speaking. When both checkboxes are checked it shows family friendly or Spanish Speaking. I would like it to show family friendly AND Spanish speaking making all other rows disappear that don’t match disappear. My checkboxes are currently taking the state dropdown into consideration too and I would like that to stay the same.

For example, if you select Texas, in my table, and check both dropdowns I would like only events that have Texas listed as state, are family friendly and Spanish speaking (should only return one result).

My code:

<script>
        $("input[name='filterStatus'], #filter").change(function() {
        var classes = [];
        var filterValue = $("#filter").val();
        var row = $('.row-events');

        $("input[name='filterStatus']").each(function() {
          if ($(this).is(":checked")) {
            classes.push('.' + $(this).val());
          }
        });

        row.hide();
        row.each(function(i, el) {
          if ((classes == "" || classes.some(function(className) {
              return $(el).find('td' + className).html() != `&nbsp;`;
            })) && (filterValue == "all" || $(el).attr('data-type') == filterValue)) 
{
            $(el).show();
          }
        });
});
      </script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label id='label-state-text'>Select Your State:</label>
      <select class="state" id="filter">
        <option value="all" selected="selected">Select a State</option>
        <option value="AZ">Arizona</option>
        <option value="CA">California</option>
        <option value="NC">North Carolina</option>
        <option value="SC">South Carolina</option>
        <option value="TX">Texas</option>
      </select>
  </form>

 <form name="FilterForm" id="FilterForm" action="" method="">
    <input type="checkbox" name="filterStatus" value="family" />
    <label  for="filter_1">Family Friendly?</label>
    <input type="checkbox" name="filterStatus" value="ESP" />
    <label for="filter_2">Spanish Speaking?</label>
  </form>

 <table id="myTable-events">
<thead>
<tr>
<th class='event_heading'> Name </th>
<th class='event_heading'> Date </th>
<th class='event_heading'> State </th>
<th class='event_heading'> Family Friendly </th>
<th class='event_heading'> Spanish Speaking </th>    
</tr>
</thead>
<tr class="row-events" data-type="TX">
<td> Event 1 </td>
<td> 10/22/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP">&nbsp;</td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 11 </td>
<td> 10/22/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP">&nbsp;</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 2 </td>
<td> 09/20/2023 </td>
<td> Texas </td>
<td class="family">&nbsp;</td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="NC">
<td> Event 3 </td>
<td> 06/18/2023 </td>
<td> North Carolina </td>
<td class="family">&nbsp;</td>
<td class="ESP">&nbsp;</td>
</tr>
<tr class="row-events" data-type="SC">
<td> Event 4 </td>
<td> 05/02/2023 </td>
<td> South Carolina </td>
<td class="family">&nbsp;</td>
<td class="ESP">Yes</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 5 </td>
<td> 12/29/2023 </td>
<td> Texas </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 6 </td>
<td> 11/20/2023 </td>
<td> California </td>
<td class="family">&nbsp;</td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AZ">
<td> Event 7 </td>
<td> 08/09/2023 </td>
<td> Arizona </td>
<td class="family">&nbsp;</td>
<td class="ESP">&nbsp;</td>
</tr>
<tr class="row-events" data-type="TX">
<td> Event 8 </td>
<td> 10/19/2023 </td>
<td> Texas </td>
<td class="family">&nbsp;</td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="CA">
<td> Event 9 </td>
<td> 08/04/2023 </td>
<td> California </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>
<tr class="row-events" data-type="AK">
<td> Event 10 </td>
<td> 03/26/2023 </td>
<td> Alaska </td>
<td class="family"> Yes </td>
<td class="ESP"> Yes </td>
</tr>


</table>

>Solution :

it would help if you changed to this

<script>
$("input[name='filterStatus'], #filter").change(function() {
  var classes = [];
  var filterValue = $("#filter").val();
  var row = $('.row-events');

  $("input[name='filterStatus']").each(function() {
    if ($(this).is(":checked")) {
      classes.push('.' + $(this).val());
    }
  });

  row.hide();
  row.each(function(i, el) {
    var state = $(el).attr('data-type');
    var isMatch = (filterValue == "all" || state == filterValue) && (classes.length == 0 || classes.every(function(className) {
      return $(el).find('td' + className).html() != `&nbsp;`;
    }));
    if (isMatch) {
      $(el).show();
    }
  });
});
</script>