Hide and show divs on basis of price and category checkboxes in javascript

Question

I am having a div arrangement in which I am defining data attributes. Like I'm displaying a product list in a div with data attributes, namely data-category and data-price. I want to hide and show divs on basis of selection by checkboxes of category and price. Html structure is as follows:

<div class="content" data-category="shoes" data-price="1000">shoe1</div><br />
<div class="content" data-category="shirts" data-price="1200">shirt1</div><br />

<div class="content" data-category="shoes" data-price="2000">shoe2</div><br />
<div class="content" data-category="shoes" data-price="800">shoe3</div><br />
<div class="content" data-category="shirts" data-price="1300">shirt2</div><br />
<div class="content" data-category="shirts" data-price="800">shirt3</div><br />

<input type="checkbox" class="category" category="shoes" id="shoes">shoes
<input type="checkbox" class="category" category="shirts" id="shirts">shirts

For category, I have kept checkboxes, but for price, I need to use range jquery slider I guess, but I'm unable to use that filter. Basically if you select a category from checkbox lets say shoes, then divs only with shoes should get displayed; and then if you filter the results with price some starting and ending limit it should show shoes category divs falling in that specific range. Not out of range.

For example:- we selected shoes checkbox, it should show shoe divs; then if we select range as 1000-2000, then it should show shoe1 and shoe2 and not shoe3. Please help on this.

Answer 1

Since "category" is not a valid attribute name in html, you should use something else instead. In this case, it would be natural to just use the id directly, as this is the values you need anyway:

<input type="checkbox" class="category" id="shoes">shoes
<input type="checkbox" class="category" id="shirts">shirts

For range, you could have something like this:

<input type="radio" name="range" value="0-9000" checked>All
<input type="radio" name="range" value="0-999">0-1000
<input type="radio" name="range" value="1000-2000">1000-2000

Then in the javascript:

$("input.category").prop("checked", true).change(function (e) {
    //Trigger change event on active price range item where the filter is applied
    $("input[name=range]:checked").trigger("change");
});
$("input[name=range]").change(function (e) {
    var toggle = this.checked;
    var range = this.value.split('-');
    var rangeFrom = parseInt(range[0]);
    var rangeTo = parseInt(range[1]);
    // If all category checkboxes are off we will ignore category filter
    var allOff = ($("input[type=checkbox]:checked").length === 0);
    $(".content[data-price]").each(function(){
        var $this = $(this);
        // Check if category is active
        var active = allOff || $("#" + $this.data("category")).prop("checked");
        // Get price as number
        var price = parseFloat($this.data('price'));
        // Toggle visibility based on category and price range
        $this.toggle(price >= rangeFrom && price <= rangeTo && active );
    });
});