JS / jQuery-使用复选框过滤div

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?

Answer 1

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

Answer 2

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