Question

我尝试在我的网站上进行快速简单的过滤功能。用户可以选中和取消选中复选框以过滤他们想要查看的内容。

目前我正在使用此脚本：

$(".filter-obj :checkbox").click(function() {
  $(".obj").hide();
  $(".filter-obj:checkbox:checked").each(function() {
    $("." + $(this).val()).show();
  });
});

这是我的HTML：

<ul class="filter-obj">
    <li>
       <div class="checkbox">
           <input class="filter-search" id="filter-obja" value="a" type="checkbox">
           <label for="filter-obja"> Object A</label>
       </div>
    </li>
    <li>
       <div class="checkbox">
           <input class="filter-search" id="filter-objb" value="b" type="checkbox">
           <label for="filter-objb"> Object B</label>
       </div>
    </li>
</ul>


<!-- my objects -->
<div class="obj a">Object A</div>
<div class="obj a">Object A</div>
<div class="obj b">Object B</div>
<div class="obj b">Object B</div>

它非常适用于仅显示已检查并隐藏未检查的内容。但是，当一切都未经检查时，我还希望它再次显示所有div。帮助

Answer 1

您可以获取复选框的长度，如果它返回0（false），则显示（）

var check = $(".filter-obj :checkbox:checked").length;

if(!check) return $(".obj").show();

修改使用 return 将停止其余代码的运行。

$(".filter-obj :checkbox").click(function() {
    var check = $(".filter-obj :checkbox:checked").length;
    if(!check) return $(".obj").show();

    $(".obj").hide();
    $(".filter-obj:checkbox:checked").each(function() {
       $("." + $(this).val()).show();
    });

});

取消选中所有复选框时显示所有div

1 个答案: