Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

Question

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

I have a unique div setup where I'm defining data attributes to display a product list. Each div contains data attributes for category (data-category) and price (data-price). I want to be able to show or hide specific divs based on selections made using checkboxes for category and price. Below is the structure of the HTML:

<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

Currently, I have checkboxes set up for selecting categories, but I'm struggling with implementing a range jQuery slider for selecting prices. Ideally, when a user selects a category checkbox (e.g. shoes), only the corresponding div elements should be displayed. Then, if the user applies a price filter within a specified range, only the div elements falling within that range should be displayed.

For instance: If "shoes" is selected, only shoe divs should be shown. If a price range of 1000-2000 is applied, then only shoe1 and shoe2 should be displayed, excluding shoe3. Any assistance with this would be greatly appreciated.

javascript jquery html css checkbox

Answer 1

Answer №1

When it comes to HTML attributes, using "category" may not be the best choice. It would be more appropriate to use a different attribute name, like an ID, which is what you need in this scenario:

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

For creating ranges, consider something similar to this setup:

<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 your JavaScript code:

$("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 );
    });
});

Answer 2

When it comes to HTML attributes, using "category" may not be the best choice. It would be more appropriate to use a different attribute name, like an ID, which is what you need in this scenario:

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

For creating ranges, consider something similar to this setup:

<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 your JavaScript code:

$("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 );
    });
});

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

Answer №1

Similar questions

Having trouble centering the links in the Bootstrap navbar?

The Journey of React Native Routing

What is the process for obtaining the Tag from a React Component?

The Axios onDownloadProgress function on the GET method is only triggered one time, and the setTimeout within the callback is never executed

ASP.NET MVC controller encountering empty values through Ajax

Customizing AngularJS Scripts to Include Target Blank

Comparing "if" and "else" within the XMLHttpRequest() function will not

A guide on effectively mocking functions in Jest tests with Rollup.js

Explore the functions of jQuery's .css() method and the implementation of

Looking for assistance with PHP if statement and troubleshooting iFrame issues

Is the maxlength attribute malfunctioning in Chrome and Safari for HTML forms?

Error occurred due to 'NoneType' object lacking the 'split' attribute while attempting to send a post request through Ajax to Django

Looking to trigger a PHP page by clicking on a div?

Concealing a hyperlink depending on the value chosen in a dropdown menu

PHP code cannot be executed due to a problem with Angular routing

JavaScript - AJAX Call Terminated after a Period on Secure Socket Layer (SSL)

What is the best way to transform parameters in axios requests into objects?

Tips on successfully passing multiple keys and their associated HTML tag attributes in a React application

ng-if not functioning properly in Internet Explorer 8

What happens when browsers encounter unfamiliar at-rules?