Как проверить, что значение флажка содержит строковое значение из ввода в JavaScript

$(document).ready(function() {
  $("table th").click(function() {
    showFilterOption(this);
  });
});

var arrayMap = {};

function showFilterOption(tdObject) {
  var filterGrid = $(tdObject).find(".filter");
  if (filterGrid.is(":visible")) {
    filterGrid.hide();
    return;
  }
  $(".filter").hide();

  var index = 0;
  filterGrid.empty();
  var allSelected = true;

  filterGrid.append('<div><input id = "searchtext" type = "text" placeholder = "Search" style = "width: 70% !important"></div>');
  filterGrid.append('<div id = "checkBoxes">');
  filterGrid.append('<label><input type = "checkbox" id = "all" class = "largerCheckbox" value = "ALL">ALL</label>')


  var ColorsAvailable = document.getElementById('checkBoxes');
  var check_value = new Array();
  check_value[0] = "Yellow";
  check_value[1] = "Red";
  check_value[2] = "Green";

  var color, label, br;

  for (var count in check_value) {
    color = document.createElement("input");
    color.value = check_value[count];
    color.type = "checkbox";
    color.id = "color" + count;
    label = document.createElement("label");
    label.innerHTML = check_value[count] + ": ";
    br = document.createElement("br");
    label.appendChild(color);
    label.appendChild(br);
    ColorsAvailable.appendChild(label);
    filterGrid.append(ColorsAvailable);
  }

  filterGrid.append('</div>');

  if (!allSelected) {
    filterGrid.find("#all").removeAttr("checked");
  }

  filterGrid.append('<div style = "text-align: center"><input id = "close" type = "button" value = "Close" style = "width: 40%"/><input id = "ok" type = "button" value = "Ok" style = "width: 40%"/></div>');
  filterGrid.show();

  var $stxt = filterGrid.find("input[type='text']");
  var $closeBtn = filterGrid.find("#close");
  var $okBtn = filterGrid.find("#ok");
  var $checkElems = filterGrid.find("input[type='checkbox']");
  var $gridItems = filterGrid.find(".grid-item");
  var $all = filterGrid.find("#all");

  $closeBtn.click(function() {
    filterGrid.hide();
    return false;
  });

  $("#searchtext").on('input',function() {
    let inputValue = $(this).val().toLowerCase();
    let allChecked = $('#all').is(':checked');
    $("#checkBoxes input[type='checkbox']").each(function() {
      const val = $(this).attr('value').toLowerCase()
      $(this).closest('label').toggle(allChecked || val.includes(inputValue));
    });

  });


  $okBtn.click(function() {
    filterGrid.find(".grid-item").each(function(ind, ele) {
      if ($(ele).find("input").is(":checked")) {
        $(arrayMap[ind]).show();
      } else {
        $(arrayMap[ind]).hide();
      }
    });

    filterGrid.hide();
    return false;
  });

  $checkElems.click(function(event) {
    event.stopPropagation();
  });

  $gridItems.click(function(event) {
    var chk = $(this).find("input[type='checkbox']");
    $(chk).prop("checked", !$(chk).is(":checked"));
  });

  $all.on('click', function() {
    var chked = $(this).is(":checked");
    filterGrid.find("[type=checkbox]").prop("checked", chked);
  });

  filterGrid.click(function(event) {
    event.stopPropagation();
  });

  return filterGrid;
}

table {
  margin: 0 auto;
  margin-top: 20px;
  width: 100%;
  position: relative;
  overflow: auto;
  overflow-y: overlay;
}

th,
thead {
  position: sticky;
  top: 0;
  border: 1px solid #dddddd;
  background-color: #1f2d54;
  text-align: center;
  color: white;
  table-layout: fixed;
  word-break: break-word;
  height: 45px;
}

.filter {
  position: absolute;
  width: 20vw;
  height: 30vh;
  display: none;
  text-align: left;
  font-size: small;
  z-index: 9999;
  overflow: auto;
  background: #ffffff;
  color: #1f2d54;
  border: 1px solid #dddddd;
}

.filter input {
  margin: 5px !important;
  padding: 0 !important;
  width: 10%;
}

input.largerCheckbox {
  margin: 5px;
  padding: 0;
  width: 13px;
  height: 13px;
}

input[type='checkbox'] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style='padding: 8px;'>
  <tr>
    <th index=0>
      Email
      <div class = "filter"></div>
    </th>
    <th index=1>
      Name
      <div class = "filter"></div>
    </th>
    <th index=2>
      Level
      <div class = "filter"></div>
    </th>
    <th index=3>
      Location
      <div class = "filter"></div>
    </th>
  </tr>

  <tr>
    <td>Email 1</td>
    <td>Name 1</td>
    <td>Level 1</td>
    <td>Location 2</td>
  </tr>
  <tr>
    <td>Email 1</td>
    <td>Name 1</td>
    <td>Level 1</td>
    <td>Location 1</td>
  </tr>
  <tr>
    <td>Email 2</td>
    <td>Name 1</td>
    <td>Level 2</td>
    <td>Location 1</td>
  </tr>
  <tr>
    <td>Email 3</td>
    <td>Name 2</td>
    <td>Level 2</td>
    <td>Location 1</td>
  </tr>
  <tr>
    <td>Email 3</td>
    <td>Name 3</td>
    <td>Level 1</td>
    <td>Location 2</td>
  </tr>
  <tr>
    <td>Email 1</td>
    <td>Name 2</td>
    <td>Level 2</td>
    <td>Location 1</td>
  </tr>
</table>