CODEWITHSUNDEEP
javascripthtmljquery
Danny
Danny

Reputation: 101

Option to check all boxes and hide table row elements

I've created a simple table where I have the option to select all checkboxes. I would like to have the option to hide individual rows, or hide all the rows when using the select all function. I've managed to get the checkboxes working, but I can't figure out why the table isn't responding to the action. I appreciate any help or insight.

The full code is in this Fiddle. Here is a glance at the jquery and javascript:

 <script>
   $(document).ready(function() {
     $('input[type="checkbox"]').change(function() {
       var inputValue = $(this).attr("value");
       $("." + inputValue).toggle();
     });
   });
 </script>

 <script>
   function checkedAll() {
     var elements = this.form.getElementsByTagName('input');
     // iterate and change status
     for (var i = elements.length; i--;) {
       if (elements[i].type == 'checkbox') {
         elements[i].checked = this.checked;
       }
     }
   }
 </script>

Upvotes: 1

Views: 38

Answers (1)

Manav
Manav

Reputation: 1367

<script>
   $(document).ready(function() {
     $('input[type="checkbox"]').change(function() {
       var inputValue = $(this).attr("value");
       var checked =  $(this)[0].checked;
       $("tr").each(function() {
           if($(this).find("td:eq(0)").html() === inputValue.toString()) { // this checks the first cell of each row of the table for a match
               if(checked) {        //instead of just toggling, you check the status and then show/hide
                   $(this).hide();
               } else {
                   $(this).show();
               }
           }
       });
     });
   });
 </script>
 <script>
   function checkedAll() {
     var elements = this.form.getElementsByTagName('input');
     // iterate and change status
     for (var i = elements.length; i--;) {
       if (elements[i].type == 'checkbox') {
         elements[i].checked = this.checked;
         $(elements[i]).trigger("change"); // this triggers the function above
       }
     }
   }
 </script>

This should work for you. The .each loop will iterate through the rows and hide the ones where the first td is the value to be hidden.

Upvotes: 1

Related Questions