Javascript -show the particular table row based on checkbox

Question

I want to display the table row based on the checkbox selection where I need to display only the particular row. I'm noob in JavaScript and took this snippet from How to show table rows based on checkbox selected

I tried to modify the code as per the requirement but I couldn't able to figure out.

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



    <script>
    // checkbox selection
    
         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;
     }  
    
    </script>

Answer 1

Your approach could possibly use some work. W3 has a good example of filtering based on inputs that could be helpful in getting you on the right track.

Below I have provided a working example, using the W3 code as a starting place. This should give you an idea how to implement your desired solution.

In the code you provided it appears that you may be working with jQuery. The solution below is pure JS and does not require any outside libraries. In addition to modifying the JS filtering function ( filter_type ), we moved the onclick attribute from the div holding all the checkboxes and placed it on each individual checkbox input.

           <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" onclick="filter_type();">
               NORTHAMERICA</label>

           </li>
           <li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3" onclick="filter_type();">
               LATAM</label>
           </li>

           <li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_2" onclick="filter_type();">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_1">
             <td>i.Region</td>
             <td>i.Area </td>
             <td>NORTHAMERICA</td>
           </tr>
           <tr id="trow_2">
             <td>i.Region</td>
             <td>i.Area </td>
             <td>LATAM</td>
           </tr>
           <tr id="trow_3">
             <td>i.Region</td>
             <td>i.Area </td>
             <td>ASIA</td>
           </tr>
         </tbody>



         <script>
           function filter_type() {
             //declare variables
             var inputs, input, filters, table, tr, td, i, r;
             //get all checkbox inputs
             inputs = document.querySelectorAll("input[type=checkbox]");
             table = document.getElementById("table_id");
             tr = table.getElementsByTagName("tr");
             //array to hold filters
             filters = [];

             //loop through inputs and add value for all checked to filters
             for (i = 0; i < inputs.length; i++) {
               input = inputs[i];
               if (input.checked) {
                 filters.push(input.value);
               }
             }

             //loop through each row in table
             for (r = 0; r < tr.length; r++) {
               //get column to compare to, in this case the 3rd column
               td = tr[r].getElementsByTagName("td")[2];
               if (td) {
                 //get value of the column
                 txtValue = td.textContent || td.innerText;
                 //check if column value is the filters array
                 //or if filters array is empty, show all rows
                 if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
                   //true, show row
                   tr[r].style.display = "";
                 } else {
                   //false, hide row
                   tr[r].style.display = "none";
                 }
               }
             }

           }

         </script>