How to display particular table row in javascript

I want to display the table row based on the checkbox selection where I need to display only the particular row from the table when the user selects the particular country

In the JS script it matching the td value but I don’t mention the table value explicitly all it comes from the db.

function filter_type(box) {
  //alert("checked");
  var cbs = document.getElementsByTagName('input');
  var all_checked_types = [];
  for (var i = 0; i < cbs.length; i++) {
    if (cbs[i].type == "checkbox") {
      if (cbs[i].name.match(/^country/)) {
        if (cbs[i].checked) {
          all_checked_types.push(cbs[i].value);
        }
      }
    }
  }

  if (all_checked_types.length > 0) {
    $('.dataclass tr:not(:has(th))').each(function(i, row) {
      var $tds = $(this).find('td'),
        type = $tds.eq(2).text();
      if (type && all_checked_types.indexOf(type) >= 0) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  } else {
    $('.datatbl tr:not(:has(th))').each(function(i, row) {
      var $tds = $(this).find('td'),
        type = $tds.eq(2).text();
      $(this).show();
    });
  }
  return true;
}


<div>Country</div>
<div class="row" name="country_checkbox" id="id_row" onclick="return filter_type(this);">

  <ul id="id_country">
    <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0">
             NORTHAMERICA</label>

    </li>
    <li><label for="id_country_3"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_3">
             ASIA</label>
    </li>

    <li><label for="id_country_2"><input type="checkbox" name="country" value="AMERICA" 
            placeholder="Select Country" id="id_country_2">AMERICA</label>
    </li>

  </ul>
</div>
<table class="datatable" id='table_id'>
  <thead>
    <thead>
      <tr>
        <th>REGION</th>
        <th> AREA</th>
        <th> Country </th>
      </tr>
    </thead>

    <tbody>
      <tr id="trow">
        <td>NORTHAMERICA</td>
        <td>US </td>
        <td>US</td>
      </tr>
    </tbody>

Answer

Here is a working version

I chose to use plain JavaScript.

const rows = document.querySelector("#table_id tbody").querySelectorAll("tr");
const checks = document.getElementById("id_country")
  .querySelectorAll("[name=country]");
document.getElementById("id_country").addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.name === "country") {
    const countries = [...checks]
      .filter(chk => chk.checked)
      .map(({value}) => value)
    /* hide if there are selected countries and if the row country is not found
       in the list of checked countries */
    rows.forEach(row => row.classList.toggle("hide", 
      countries.length > 0 && !countries.includes(
        row.querySelector("td:nth-child(3)").textContent.trim().toUpperCase())
      )
    )
  }
})
.hide {
  display: none;
}
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
  <ul id="id_country">
    <li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0">NORTHAMERICA</label>
    </li>
    <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3">LATAM</label>
    </li>

    <li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" 
            placeholder="Select Country" id="id_country_2">ASIA</label>
    </li>

  </ul>
</div>
<table class="datatable" id='table_id'>
  <thead>
    <thead>
      <tr>
        <th>Region</th>
        <th> Area </th>
        <th> Country </th>
      </tr>
    </thead>
    <tbody>
      <tr id="trow">
        <td>Region</td>
        <td>Area </td>
        <td>NORTHAMERICA</td>
      </tr>
      <tr id="trow">
        <td>Region</td>
        <td>Area </td>
        <td>ASIA</td>
      </tr>
      <tr id="trow">
        <td>Region</td>
        <td>Area </td>
        <td>LATAM</td>
      </tr>
    </tbody>
</table>