JS / jQuery - 用复选框过滤 div

Posted 2023-03-10

【中文标题】JS / jQuery - 用复选框过滤 div

【英文标题】：JS / jQuery - Filtering divs with checkboxes

【发布时间】：2013-04-26 12:21:25

【问题描述】：

我正在尝试使用以下代码过滤一些带有复选框的 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/

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

【参考方案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

【讨论】：

@Godge 检查附加的演示

谢谢，如果没有选中复选框，我仍然希望它显示所有 div。

【参考方案2】：

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

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

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

【讨论】：

啊……打败我了，+1 :)

我应该更好地解释这一点：如果没有选中任何复选框，我希望所有 div 重新出现。您的代码解决了我最初的问题，但如果再次取消选中复选框，它们将不再出现。有什么想法吗？