Question 221698 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

custom table filter js/jquery script

I have 4 checkboxes to filter 4 categories of table data.

<input type="checkbox" value="audio" id="music_filter">
<input type="checkbox" value="video" id="video_filter">
<input type="checkbox" value="writing" id="writing_filter">
<input type="checkbox" value="game" id="games_filter">

<table>
<tr class="audio"> <td>some data</td> </tr>
<tr class="video"> <td>some data</td> </tr>
<tr class="writing"> <td>some data</td> </tr>
<tr class="game"> <td>some data</td> </tr>
</table>

Desired behaviors:

  1. If no boxes are checked, display all table data

  2. If any boxes are checked, hide any unchecked boxes

So far I have this but I don’t know how to find and hide the correct table rows:

     $('#music_filter, #video_filter, #writing_filter, #games_filter').on('click',function(){
        var unCheckedlength = $("input[type=checkbox]:not(:checked)").length; 
        if (unCheckedlength < 4) {
            var notchecked = $("input[type=checkbox]:not(:checked)")
            for (box in notchecked) {
                    // needed code to hide unwanted table rows
            }
        } else {
           $('.audio, .writing, .game, .video').show();
        };
    });
Tags:

2

Answers


  1. 0

    You are on the right track. To achieve the desired behavior of showing and hiding the table rows based on the selected checkboxes, you can use the following approach:

    <!-- HTML -->
<input type="checkbox" value="audio" id="music_filter">
<input type="checkbox" value="video" id="video_filter">
<input type="checkbox" value="writing" id="writing_filter">
<input type="checkbox" value="game" id="games_filter">

<table>
  <tr class="audio"> <td>some data</td> </tr>
  <tr class="video"> <td>some data</td> </tr>
  <tr class="writing"> <td>some data</td> </tr>
  <tr class="game"> <td>some data</td> </tr>
</table>

    // JavaScript
$(document).ready(function() {
  $('#music_filter, #video_filter, #writing_filter, #games_filter').on('click', function() {
    var checkedBoxes = $("input[type=checkbox]:checked");

    if (checkedBoxes.length > 0) {
      var selectedCategories = checkedBoxes.map(function() {
        return $(this).val();
      }).get();

      $('tr').hide(); // Hide all table rows initially

      // Show the table rows that belong to the selected categories
      selectedCategories.forEach(function(category) {
        $('.' + category).show();
      });
    } else {
      // If no boxes are checked, display all table data
      $('tr').show();
    }
  });
});

    Explanation:

    1. We use the $("input[type=checkbox]:checked") to find all the checked checkboxes.
    2. If any checkboxes are checked, we collect their values (categories) in an array using map() and get().
    3. We hide all table rows initially using $('tr').hide().
    4. For each selected category, we use $('.' + category).show() to show the table rows that belong to that category (class).
    5. If no checkboxes are checked, we use $('tr').show() to display all table data.

    This code will ensure that only the table rows corresponding to the selected categories are shown, and the rest will be hidden. When no checkboxes are checked, all the table data will be displayed.

    Login or Signup to reply.
  2. 0 
    $('input').on('click',()=>{
  let ids = $('input:checked')
    .map( (i,input) => $(input).val()).get()
  $('tr')
    .filter( (i,tr) => !ids.includes($(tr).attr('class'))).hide()
})

    Each time an input is clicked this will get a list of checkboxes’ ids that are checked. Then it will hide all the rows that are not in that list.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search