show and hide class based on checkbox value usig Jquery

Question

Hi currently i am developing an filtering application . Please see my html and js code

  jQuery(document).ready(function($){ $(".color-label").on("click",function(){ var color_box_val= $(this).find('.color-box').val(); $('.test-li').hide(); $('div:contains('+color_box_val+')').closest('.test-li').show(); }); }); 

 .hidden-color{ display:none; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <label class="color-label">Red<input type="checkbox" class="color-box" value="red"/></label> <label class="color-label">Black <input type="checkbox" class="color-box" value="Black"/></label> <ul> <li class="test-li"> <div class="test-div"> <p class="hidden-color">red</p> red poduct </div> </li> <li class="test-li"> <div class="test-div"> <p class="hidden-color">Black</p> black Product </div> </li> <li class="test-li"> <div class="test-div"> <p class="hidden-color">Blue</p> blue Product </div> </li> 

So here what iam doing is when customer click black , then it will show black product . If the customer click both red and black then we need to show both , and if customer didn't tick anything then we need to show all product .

But i stuck in some point . Here how can i show both red and black when the clicked both ? Currently it is showing the result based on newly clicked check box . Also if they untick every thing then i need to show all box . Please suggest .

Answer 1

The first thing I would recommend changing is how you store color data in your list items. Instead of storing them in a hidden paragraph element, why not store them as HTML5 data- attributes?

Once that is done, it is quite simple to do what you intend: which is basically a OR operation, ie when red and black are ticked, you want to show items that are red or black.

The logic is as follow:

1. You listen to the .change() event on all the checkboxes
2. When this event is fired, you want to collect the values of all these checkboxes, but only if they are checked. This is done by using .filter(':checked') to select for checked checkboxes and .map() to return the array.
3. Next, you iterate through all the list items. If their data-color values are found in the array, you show them. Otherwise you hide them.

And all this logic is wrapped within a conditional statement that checks if any of the checkboxes are filtered:

• If none is checked, we do not want any filtering
• If one or more is checked, we perform filtering using the aforementioned filtering logic

Update: I have used .toLowerCase() to convert all your color values to lowercase, since from your question I can see that the values might be optionally capitalised.

See proof-of-concept example below:

 jQuery(document).ready(function($) { // Listen to change event $('.color-box').change(function() { // Store checked checkboxes var $checked = $('.color-box').filter(':checked'); if ($checked.length) { // Perform filtering if one or more is checked // Collect ALL values from all .color-box into an array var colors = $checked.map(function() { return $(this).val().toLowerCase(); }).get(); // Iterate through each list item and evaluate $('.test-li').each(function() { var $t = $(this); if (colors.indexOf($t.data('color').toLowerCase()) >= 0) { $t.show(); } else { $t.hide(); } }); } // If nothing is checked, show all list items else { $('.test-li').show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <label class="color-label">Red<input type="checkbox" class="color-box" value="red"/></label> <label class="color-label">Black <input type="checkbox" class="color-box" value="Black"/></label> <ul> <li class="test-li" data-color="red"> <div class="test-div"> red Product </div> </li> <li class="test-li" data-color="black"> <div class="test-div"> black Product </div> </li> <li class="test-li" data-color="blue"> <div class="test-div"> blue Product </div> </li>