JS / jQuery - Filtering divs with checkboxes

Question

I'm trying to filter some divs with checkboxes using the following code:

$("#filterControls :checkbox").click(function() {
  $(".sectionContent").hide();
  $("#filterControls :checkbox:checked").each(function() {
    $("." + $(this).val()).show();
  });
  if($("#filterControls :checkbox").prop('checked') == false){
    $(".sectionContent").show();
  }
});

This works fine when you check the first checkbox, but it only filters with the others when you also have the first checkbox selected. It's hard to explain but try the JSFiddle: http://jsfiddle.net/BY9JL/

I don't want it to rely on having the first checkbox checked, is there a way around this?

Arun P Johny · Accepted Answer · 2013-05-02 11:51:45Z

5

Try

var sections = $('.sectionContent');
function updateContentVisibility(){
    var checked = $("#filterControls :checkbox:checked");
    if(checked.length){
        sections.hide();
        checked.each(function(){
            $("." + $(this).val()).show();
        });
    } else {
        sections.show();
    }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();

Demo: Fiddle

edited May 2, 2013 at 11:51

answered May 2, 2013 at 10:58

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arun P Johny Over a year ago

@Godge check the attached demo

AJT Over a year ago

Thanks, I still want it to show all the divs if no checkboxes are checked though.

thebreiflabb · Accepted Answer · 2013-05-02 10:55:01Z

3

It's because your last if check, it will only check the first checkbox if it is checked or not.

You could change your last if block to see if there are any checked at all:

if($("#filterControls :checkbox:checked").length == 0){
    $(".sectionContent").show();
}

answered May 2, 2013 at 10:55

thebreiflabb

1,54410 silver badges19 bronze badges

2 Comments

billyonecan Over a year ago

Ahh.. beat me to it, +1 :)

AJT Over a year ago

I should've explained this a bit better: if none of the checkboxes are checked, I want all the divs to reappear. Your code fixed my initial problem but stopped them all from reappearing if the checkboxes are unchecked again. Any ideas?

Collectives™ on Stack Overflow

JS / jQuery - Filtering divs with checkboxes

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related