Is it possible for the ".filter" function to verify if the target contains multiple attributes?

Question

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

I'm currently working on a checkbox filter setup and using Jquery's .filter to sort through some divs.

Below is the snippet of Jquery code that I am using:

$(document).ready(function(){
var checkboxes = $('div.filter-groups').find('input:checkbox'),
general = $('.general');

function filterCheckboxes(){
    var checked = checkboxes.filter(':checked');

    general.hide();
    $.each(checked, function(){
    var rel = $(this).data('filter');

        general.filter('.' + rel).show();
    });
}

checkboxes.on('click', filterCheckboxes);
});

You can view the web page here:

Or check out this jsfiddle for a live demo: http://jsfiddle.net/jonathanSumner90/nh8vr1kp/1/

I'm looking for a way to make the .filter function verify if the div has all the attributes of the selected checkboxes before displaying. Any ideas?

Also, I've noticed that when I check and then uncheck a box or boxes, all the divs disappear. Is there a way to fix this issue?

javascript jquery html css filter

Answer 1

Answer №1

You were facing a couple of issues:

You were hiding all the divs but never showing them again.
You were only hiding at each :checked input, so only one filter was being considered.

From looking at your jsFiddle code snippet:

In your document.ready function, you were targeting all checkboxes inside 'div.filter-groups' and hiding the '.general' elements whenever a checkbox was clicked. You were then building an array of selectors based on checked checkboxes, but not handling the case when no filters were selected. Finally, you were joining the selectors and showing those specific elements.

I haven't fully tested this amended code, but hopefully it points you in the right direction.

Answer 2

You were facing a couple of issues:

You were hiding all the divs but never showing them again.
You were only hiding at each :checked input, so only one filter was being considered.

From looking at your jsFiddle code snippet:

In your document.ready function, you were targeting all checkboxes inside 'div.filter-groups' and hiding the '.general' elements whenever a checkbox was clicked. You were then building an array of selectors based on checked checkboxes, but not handling the case when no filters were selected. Finally, you were joining the selectors and showing those specific elements.

I haven't fully tested this amended code, but hopefully it points you in the right direction.

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

Answer №1

Similar questions

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

pattern validation using a regular expression

The Cordova minification tool fails to compress files within the browser platform

Transferring scope between pages without the need for an angular service definition

Include a query parameter each time a page is added to bookmarks

Displaying PHP output within a JavaScript expression

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

What causes the initial AJAX response to be delayed by 10 seconds when using setInterval()?

I am experiencing issues with the customsort function when trying to sort a column of

How can I set the input tag to reset back to 1 when a certain event occurs?

Ways to address the alignment of list items within a drawer component using React

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Challenge with maintaining tab view data in Openui5

Spinning image on button click with seamless animation in Javascript

Removing a specific row in a database table and sending a boolean indicator to an API, all while keeping the original object intact

How about creating a fresh variable in Assemble or merging two comparison helpers together?

Adaptable placement of background across screen widths

The flow of Ajax execution halts once the initial calculation is completed

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

Having trouble with NextJS when trying to add an item to an element and render it in a Tailwind select