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.

how could possibly compare it though I need to match the database value which I don't specify explicitly like the country name all it comes from the database

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="AMERICA" placeholder="Select Country" id="id_country_3">
         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">
                 {% for i in database%} --- database retrieval
                  <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>

onclick="showHide()" remove this from code. you already handled same in jquery. and showHide is not defined anywhere that's why you are getting error — Sojin Antony
– Sojin Antony, Commented Oct 22, 2021 at 12:35
After removing it I dont see any action of the javascript as it suppose to show the table row upon the checkbox selection @sojin — imran_44
– imran_44, Commented Oct 22, 2021 at 12:39

Sojin Antony · Accepted Answer · 2021-10-22 13:32:54Z

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

edited Oct 22, 2021 at 13:32

answered Oct 22, 2021 at 12:53

Sojin Antony

2,2521 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

imran_44 Over a year ago

Its working but its not working as expected. I want to show out only the particular table row but it just hides and show only the first row there was no action on the other rows could u pls help on this. for example :If the user select india that table row containing india has to be shown @sojin

Sojin Antony Over a year ago

Ok let me try to add this.

Sojin Antony Over a year ago

I have updated the code as you said,

imran_44 Over a year ago

U r dng great help.Can u make it dynamic though I get lot of rows in database I can't mention <id="trow_2">. Basically I'm retrieving the data from the db so could u pls check

Collectives™ on Stack Overflow

How to show table row based on checkbox selection in javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related