Checked selected category and unchecked on the given list?

See more:

jQuery

HTML5

Hi Team

I have 2 category list one is for price and second is for colors. The problem is my logic checked for selected one to be independent from one another somehow this is not happening. Instead of selected category(price) the other category is checked as well and shows the list of given category.

What i want to achieve here when if i am using category for price, once checked is select it prompts those only for the given category, when unchecked it hides those details from that category only. Vice versa with other category should do the same.

What I have tried:

<pre><!-- Price Start -->
                <div class="border-bottom mb-4 pb-4">
                    <h5 class="font-weight-semi-bold mb-4">Filter by price</h5>
                    <form>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" checked id="price-all">
                            <label class="custom-control-label" for="price-all">All Price</label>
                            1000
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-1">
                            <label class="custom-control-label" for="price-1">R0 - R100</label>
                            150
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-2">
                            <label class="custom-control-label" for="price-2">R100 - R200</label>
                            295
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-3">
                            <label class="custom-control-label" for="price-3">R200 - R300</label>
                            246
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between mb-3">
                            <input type="checkbox" class="custom-control-input" id="price-4">
                            <label class="custom-control-label" for="price-4">R300 - R400</label>
                            145
                        </div>
                        <div class="custom-control custom-checkbox d-flex align-items-center justify-content-between">
                            <input type="checkbox" class="custom-control-input" id="price-5">
                            <label class="custom-control-label" for="price-5">R400 - R500</label>
                            168
                        </div>
                    </form>
                </div>
                <!-- Price End -->

<pre lang="Javascript">$(document).ready(function() {
  // Price checkboxes change event
  $('input[type=checkbox][id^=price]').change(function() {
    var $allCheckbox = $('#price-all');
    var $checkedCheckboxes = $('input[type=checkbox][id^=price]:checked');
    var $products = $('ul#product-list').find('li');
    
    if ($checkedCheckboxes.length > 0 && !$allCheckbox.is(':checked')) {
      $products.hide();
      $checkedCheckboxes.each(function() {
        var price = $(this).attr('id').split('-')[1];
        $products.filter('[data-price="' + price + '"]').show();
      });
    } else if (!$allCheckbox.is(':checked')) {
      $products.hide();
    } else {
      $products.show();
    }
  });
  
  // Price all checkbox click event
  $("#price-all").click(function() {
    if($(this).is(':checked')) {
      $(".custom-checkbox .badge").show();
    } else {
      $(".custom-checkbox .badge").hide();
    }
  });
});