javascript - show and hide class based on checkbox value usig Jquery -

hi developing filtering application . please see html , 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 iam doing when customer click black , show black product . if customer click both red , black need show both , , if customer didn't tick need show product .

but stuck in point . here how can show both red , black when clicked both ? showing result based on newly clicked check box . if untick every thing need show box . please suggest .

the first thing recommend changing how store color data in list items. instead of storing them in hidden paragraph element, why not store them html5 data- attributes?

once done, quite simple intend: or operation, i.e. when red , black ticked, want show items red or black.

the logic follow:

1. you listen .change() event on checkboxes
2. when event fired, want collect values of these checkboxes, if checked. done using .filter(':checked') select checked checkboxes , .map() return array.
3. next, iterate through list items. if data-color values found in array, show them. otherwise hide them.

and logic wrapped within conditional statement checks if of checkboxes filtered:

• if none checked, not want filtering
• if 1 or more checked, perform filtering using aforementioned filtering logic

update: have used .tolowercase() convert color values lowercase, since question can see values might optionally capitalised.

see proof-of-concept example below:

jquery(document).ready(function($) {      // listen change event    $('.color-box').change(function() {        // store checked checkboxes      var $checked = $('.color-box').filter(':checked');        if ($checked.length) {        // perform filtering if 1 or more checked          // collect values .color-box array        var colors = $checked.map(function() {          return $(this).val().tolowercase();        }).get();          // iterate through each list item , evaluate        $('.test-li').each(function() {            var $t = $(this);            if (colors.indexof($t.data('color').tolowercase()) >= 0) {            $t.show();          } else {            $t.hide();          }          });      }        // if nothing checked, show 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>