Filtering using checkboxes using jQuery

I want to filter some content using checkboxes.

I managed to do this thanks to an earlier post , which I simplified the DEMO a bit here.

My problem is that each content item can have more than one category. When I select category A and category B, and then deselect category B, the content item that has both categories is attached, deleted.

The project I'm working on will contain more than two categories. A content item can contain many categories.

HTML:

<ul id="filters"> <li> <input type="checkbox" value="categorya" id="filter-categorya" /> <label for="filter-categorya">Category A</label> </li> <li> <input type="checkbox" value="categoryb" id="filter-categoryb" /> <label for="filter-categoryb">Category B</label> </li> </ul> <div class="categorya categoryb">A, B</div> <div class="categorya">A</div> <div class="categorya">A</div> <div class="categorya">A</div> <div class="categoryb">B</div> <div class="categoryb">B</div> <div class="categoryb">B</div> 

JavaScript:

 $('input').click(function() { var category = $(this).val(); if (!$(this).attr('checked')) $('.' + category).hide(); else $('.' + category).show(); }); 
+6
source share
5 answers

I think the two easiest approaches would be to click on any of the filters:

  • Hide all the <div> elements, then skip the checkboxes and for each marked .show() <div> element with the corresponding category.

  • Scroll all the checkboxes to make a list of the classes that will be shown, then skip the <div> elements, checking each one to see if it has one of these classes and .hide() or .show() if necessary.

Is there any general selector you can use to get all the <div> elements? They have a specific container element, for example, how are all the flags descended from "#filters"?

 // Solution 1 $("#filters :checkbox").click(function() { $("div").hide(); $("#filters :checkbox:checked").each(function() { $("." + $(this).val()).show(); }); }); 

Demo: http://jsfiddle.net/6wYzw/41/

 // Solution 2 $("#filters :checkbox").click(function() { var re = new RegExp($("#filters :checkbox:checked").map(function() { return this.value; }).get().join("|") ); $("div").each(function() { var $this = $(this); $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"](); }); }); 

Demo: http://jsfiddle.net/6wYzw/42/

I guess the first way is shorter and easier to maintain ...

+12
source

I wanted to add jquery animations to show and hide. The above solutions did not allow this (at first they hid everything, then showed), or were bulky with regular expressions. My solution based on the above is as follows:

 var showselector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : null; }).get().join(','); var hideselector = (showselector) ? ':not(' + showselector + ')' : '*'; $("div").filter(showselector).slideDown(1500); $("div").filter(hideselector).slideUp(1500); 
+3
source

When they click on the check box to build a selector like this:

 var selector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : ''; }).get().join(''); 

This will create a selector of type categoryb.categoryc (a AND css selector). Then you can hide everything and show those that match the selector.

 $('div[class^="category"]') .hide() .filter(selector) .show(); 

Try it on jsbin

Work code:

 $('input').click(function() { var selector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : ''; }).get().join(''); console.log(selector); var all = $('div[class^="category"]'); if(selector.length) all.hide().filter(selector).show() else all.show(); }); 
+1
source

http://jsfiddle.net/FfZsC/

 $('input').click(function() { var category = $(this).val(); $('.' + category).each(function () { var anyChecked = false; var classArray = this.className.split(/\s+/); for(idx in classArray) { if ($('#filter-' + classArray[idx]).is(":checked")) { anyChecked = true; break; } } if (! anyChecked) $(this).hide(); else $(this).show(); }); }); 

Basically, I check the checkbox of each category associated with these items related to the filter that was currently clicked. If any of them are still marked, the item is displayed; otherwise it is hidden.

0
source

@Josiah Ruddell - code does not work in IE9

I added "window.console & &" to ... console.log ... to execute correctly in IE9

 $('input').click(function() { var selector = $('input:checkbox').map(function(){ return this.checked ? '.' + this.id : ''; }).get().join(''); window.console && console.log(selector); var all = $('div[class^="category"]'); if(selector.length) all.hide().filter(selector).show() else all.show(); }); 
0
source

Source: https://habr.com/ru/post/905568/


All Articles