How to not display none when checkbox already checked in filter vanilla javascript?

Question

I tried to make the checked tr, not to be displayed none when filtering the new input. for example, when I tried to input a new value after checking the tr the tr will not disappear.

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 {
        // if (tbody.querySelectorAll(".doms:checked")) {
        //     tblRows[i].style.display = "";
        // } else {
        let checks = tr[i].getElementsByTagName("td")[1];
        let far = checks.getElementsByTagName("input");
        
        tr[i].style.display = "none";
      }
    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">List Things</th>
    <th style="width:40%;">Approved</th>
  </tr>
  <tr>
    <td>Rock</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Rock2</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Car</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>House</td>
    <td><input type="checkbox"></td>
  </tr>
</table>

question from:https://stackoverflow.com/questions/65878912/how-to-not-display-none-when-checkbox-already-checked-in-filter-vanilla-javascri

Answer 1

There is minor change in your code. While you get your input you use let far = checks.getElementsByTagName("input"); which returns array, so you just need to add index with it as let far = checks.getElementsByTagName("input")[0] so it will select relative input. Then add condition if (far.checked) will work.

Also you do not need to get td from tr[i] then far object. Instead you can directly use let far = tr[i].getElementsByTagName("input")[0].

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 {
        // below lines can be ommitted
        // let checks = tr[i].getElementsByTagName("td")[1];
        // use tr[i] below and get input element with index [0]
        let far = tr[i].getElementsByTagName("input")[0];
        // add below condition to hide tr only if checkbox is not checked
        if (!far.checked) {
          tr[i].style.display = "none";
        }
      }
    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">List Things</th>
    <th style="width:40%;">Approved</th>
  </tr>
  <tr>
    <td>Rock</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Rock2</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Car</td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>House</td>
    <td><input type="checkbox"></td>
  </tr>
</table>