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($("#filterControls :checkbox:checked").length == 0){
    $(".sectionContent").show();
}

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

2 个答案: