How to show table row based on checkbox selection in javascript

Question

I'm trying to show the table row based on the user selection in the checkbox. I'm getting a error in the console. As I'm noob in JavaScript and I'm reusing this snippet from Show/Hide Table Rows based on Checkbox Any help is really appreciated.

error:

 (index):344 Uncaught ReferenceError: show Hide is not defined  
         at HTMLDivElement.onclick ((index):344)

html:

                    <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>
                      </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>
                 </tr>
              </tbody>

     
<script>

$(document).ready(function () {
    $('#id_row').on('change', function(){
        if ($(this).prop('checked')) {
            $('#trow').show();
      
        }
        else {
            $('#trow').hide();

        }
    });
    });
</script>

Answer 1

I have changed the script to check the value of input box. try this

 $(document).ready(function () { $('#trow_1').hide(); $('#trow_2').hide(); //intially hide the rows $('#id_country_0').on('change', function(e){ if ( e.target.checked) { $('#trow_1').show(); } else { $('#trow_1').hide(); } }); $('#id_country_3').on('change', function(e){ if ( e.target.checked) { $('#trow_2').show(); } else { $('#trow_2').hide(); } }); }); </script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> </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_1"> <td>Asia </td> <td>India</td> <td>India</td> </tr> <tr id="trow_2"> <td>Asia2 </td> <td>India2</td> <td>India2</td> </tr> </tbody> </table>

Please format the code before posting here so that we can easily identify the issue