Combining search and checkbox javascript filter on table

Question

I have a search filter and checkbox filter on an html table that are both working well, but they work independently. I would like to be able to check a category, and then use the search box within that category. Right now, if I start searching, the checkbox resets and vice versa.

I think there may be two ways to do this - either update the GetElement functions to only fetch what is displayed, or to combine the two if/else statements into one. But I'm self-taught and this is all new to me so I'm having trouble writing the correct code!

  function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  } 
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"

  // Select cluster
  $(document).ready(function() {
    $('input[type="checkbox"]').change(function() {
      var inputValue = $(this).attr("value");
      var checked = $(this)[0].checked;
      $("tr").each(function() {
        if ($(this).find("td:eq(1)").html() !== undefined && $(this).find("td:eq(1)").html().includes(inputValue.toString())) {
          if (checked) {
            $(this).show(); // slice by n numbers here
          } else {
            $(this).hide();
          }
        }
      });
    });
  });

function checkedAll() {
  console.log("All")
  var elements = this.form.getElementsByTagName('input');
  console.log(elements)
  // iterate and change status
  for (var i = elements.length; i--;) {
    if (elements[i].type == 'checkbox') {
      console.log(this)
      elements[i].checked = this.checked;
      $(elements[i]).trigger("change");
    }
  }
} 

table#myTable {
  width: 800px;
}

<!-- SEARCH -->

<h3>Search by keyword or phrase:</h3>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Start typing to filter the table below" style="width:100%; transform: none;">


<!-- CHECKMARKS -->


<form action="" method="post" name="frm1" id="frm1">

  <h3>Filter by category:</h3>

  <label class="clickable">
<input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll.call(this);" checked /> Select all</label><br>

  <div style="float:left; width:33%; min-width:200px;">
    <label class="clickable">
<input value="For attorneys" type="checkbox" name="cluster_ids" checked/> For attorneys</label><br>

    <label class="clickable">
<input value="For clinicians" type="checkbox" name="cluster_ids" checked/> For clinicians</label><br>

    <label class="clickable">
<input value="For patients and families" type="checkbox" name="cluster_ids" checked/> For patients and families</label><br>


    <!-- TABLE -->

    <table id="myTable">
      <tr>
        <th>
          <h1>Resource</h1>
        </th>
        <th>
          <h1>Category</h1>
        </th>
      </tr>

      <tr>
        <td>
          <h3>20 things patients can do to help prevent medical errors</h3>
          <p>Information for patients from the Agency for Healthcare Research and Quality (AHRQ)</p>
        </td>
        <td class="topic-column">For patients and families</td>
      </tr>

      <tr>
        <td>
          <h3>Best practices for attorneys representing patients using CARe</h3>
          <p>How lawyers can best support patients during the CARe process</p>
        </td>

        <td class="topic-column">For attorneys</td>

        <tr>
          <td>
            <h3>Clinician CARe communication algorithm</h3>
            <p>Flow chart with examples of what to say and what not to say during conversations with patients and families</p>
          </td>
          <td class="topic-column">For clinicians</td>
        </tr>

        <tr>
          <td>
            <h3>Guidelines for handling medical adverse events: Enhancing safety through candid communication</h3>
            <p>Covers the seven aspects of response to adverse events: initial response, truth-telling, apologies, mediation, root cause analysis, compensation, and reporting</p>
          </td>
          <td class="topic-column">For clinicians</td>
        </tr>

        <tr>
          <td>
            <h3>Handout for patients</h3>
            <p>A patient-focused flyer that explains the elements of CARe</p>
          </td>
          <td class="topic-column">For patients and families</td>
        </tr>

    </table>

Answer 1

Let us see what went wrong:

myFunction actually search on every row but as per your need it should search on only selected category

inside document ready also logic was incorrect $(this).find("td:eq(1)").html().includes(inputValue.toString())

How we can fix it:

We have a function getCheckedItems which return an array currently selected checked box value I.e category

getCheckedItems call form inside document ready to show row for only selected category. Document ready code is also been simplified

inside myFunction also checking same logic filter look only on selected category return by getCheckedItems function

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

     function getCheckedItems() {
        
        let checkboxValues = [];
        
        $('input[type="checkbox"]').each(function(index) {
            
            let inputValue = $(this).attr("value");
            
            if( $(this).is(':checked') && inputValue ){
                
                checkboxValues.push(inputValue);
            }
        });

        return checkboxValues;
    }

    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            let htmlCategory = $(tr[i]).find("td:eq(1)").html();
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1 && getCheckedItems().includes(htmlCategory)) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    $(document).ready(function() {
        $('input[type="checkbox"]').change(function() {

            $("tr").each(function() {

                let htmlCategory = $(this).find("td:eq(1)").html();
                if(getCheckedItems().includes(htmlCategory)) {
                    $(this).show(); // slice by n numbers here
                }
                else {
                    $(this).hide();
                }
            });
        });
    });

    function checkedAll() {
        console.log("All")
        var elements = this.form.getElementsByTagName('input');
        console.log(elements)
        // iterate and change status
        for (var i = elements.length; i--;) {
            if (elements[i].type == 'checkbox') {
                console.log(this)
                elements[i].checked = this.checked;
                $(elements[i]).trigger("change");
            }
        }
    }

    table#myTable {
            width: 800px;
    }

Search by keyword or phrase:

<h3>Filter by category:</h3>

<label class="clickable">
    <input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll.call(this);" checked /> Select all</label><br>

<div style="float:left; width:33%; min-width:200px;">
    <label class="clickable">
        <input value="For attorneys" type="checkbox" name="cluster_ids" checked/> For attorneys</label><br>

    <label class="clickable">
        <input value="For clinicians" type="checkbox" name="cluster_ids" checked/> For clinicians</label><br>

    <label class="clickable">
        <input value="For patients and families" type="checkbox" name="cluster_ids" checked/> For patients and families</label><br>


    <!-- TABLE -->

    <table id="myTable">
        <tr>
            <th>
                <h1>Resource</h1>
            </th>
            <th>
                <h1>Category</h1>
            </th>
        </tr>

        <tr>
            <td>
                <h3>20 things patients can do to help prevent medical errors</h3>
                <p>Information for patients from the Agency for Healthcare Research and Quality (AHRQ) apologies</p>
            </td>
            <td class="topic-column">For patients and families</td>
        </tr>

        <tr>
            <td>
                <h3>Best practices for attorneys representing patients using CARe</h3>
                <p>How lawyers can best support patients during the CARe process</p>
            </td>

            <td class="topic-column">For attorneys</td>

        <tr>
            <td>
                <h3>Clinician CARe communication algorithm</h3>
                <p>Flow chart with examples of what to say and what not to say during conversations with patients and families</p>
            </td>
            <td class="topic-column">For clinicians</td>
        </tr>

        <tr>
            <td>
                <h3>Guidelines for handling medical adverse events: Enhancing safety through candid communication</h3>
                <p>Covers the seven aspects of response to adverse events: initial response, truth-telling, apologies, mediation, root cause analysis, compensation, and reporting</p>
            </td>
            <td class="topic-column">For clinicians</td>
        </tr>

        <tr>
            <td>
                <h3>Handout for patients</h3>
                <p>A patient-focused flyer that explains the elements of CARe</p>
            </td>
            <td class="topic-column">For patients and families</td>
        </tr>

    </table>