I want to display the table row based on the checkbox selection where I need to display only the particular row. I'm new to JavaScript how could I able to achieve it.

I Have tried many Javascript snippet from the Stack Overflow as well but it didn't worked as expected. Please help me out to get this.

Here is my html:

   <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="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">
         {% for i in database%}
          <td>i.Region</td>
          <td>i.Area </td>
          <td>i.Country</td>
       {% endfor %}
         </tr>
      </tbody>