Показать все divs, когда все флажки сняты.

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> 

Он прекрасно работает на показ только, Что проверяется и скрывается, Что бесконтрольно. Тем не менее, я также хочу, чтобы он снова показывал все divs, когда все не проверено. Помогите?

Answer 1

Вы можете получить длину проверяемых коробки и если она возвращает 0 (ложь), то показать()

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

});