Recommand · October 22, 2021 0

How to show table row based on checkbox selection in javascript

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>

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