<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(); } }); });
$(document).ready(function() { // by this .ready() function, you apply just one time the 'change' trigger, at end of the DOM built. when the page loading is over. // Price checkboxes change event $('input[type=checkbox][id^=price]').change(function() { if ( !$('#price-all').is(':checked')) { // as condition, this one will be enough, because "> 0 " is always true with '#price-all' when checked $('ul#product-list').find('li').hide(); $('input[type=checkbox][id^=price]:checked').each(function() { // that a loop, if loop.length == 0 , you leave this processing function let price = $(this).attr('id').split('-')[1]; // 'let' is welcome for loop. unloading at end of scope to be refresh by another value.It's modern JScript $('ul#product-list').find('li').filter('[data-price="' + price + '"]').show(); }); } else if (!$('#price-all').is(':checked')) { $('ul#product-list').find('li').hide(); } else { $('ul#product-list').find('li').show(); } }); // Price all checkbox click event $("#price-all").click(function() { if($(this).is(':checked')) { $(".custom-checkbox .badge").show(); } else { $(".custom-checkbox .badge").hide(); } }); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)