checkbox

by imran44

HTML

<div>Country</div>
            <div class="row"  name="country_checkbox" id="country_id"  >
              <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_1"><input type="checkbox" name="country" value="EMEA" placeholder="Select Country" id="id_country_1"
      onclick="filter_type();">
 EMEA</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>
    <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>
              </ul>
            </div>
 
 
 <table class="dataclass" id='table_id'> 
    
            <thead>
              <tr>
                <th>Stage</th>
                <th>Region</th>
                <th> Area </th>
                <th> Country </th>
                <th> company_code </th>
                <th> vendor_number </th>
                </tr>
                </thead>
                    <tbody>
    
              {% for list in table_data %}
              <tr>
              <td>{{list.stage }}</td>
              <td>{{list.region }} </td>
              <!-- <td>ASIA</td> -->
              <td >{{list.area}}</td>
              <td>{{list.country}}</td>
              </tr>
              </tbody>

JavaScript

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>