JS / jQuery - 用复选框过滤 div

Question

我正在尝试使用以下代码过滤一些带有复选框的 div：

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

当您选中第一个复选框时，这可以正常工作，但仅当您还选中第一个复选框时，它才会与其他复选框一起过滤。很难解释，但试试 JSFiddle：http://jsfiddle.net/BY9JL/

我不希望它依赖于选中第一个复选框，有没有办法解决这个问题？

Answer 1

试试

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

演示：Fiddle

Answer 2

这是因为你的最后一个if检查，它只会检查第一个复选框，如果它被选中。

您可以更改最后一个 if 块以查看是否有任何检查：

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