Zeige alle Divs, wenn alle Checkboxen deaktiviert sind

Question

Ich versuche eine schnelle und einfache Filterfunktion auf meiner Website zu machen. Benutzer können die Kontrollkästchen aktivieren und deaktivieren, um zu filtern, was sie sehen möchten.

Derzeit verwende ich dieses Skript:

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

Das ist mein 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> 

Es zu zeigen, sehr gut funktioniert nur, was ist überprüft und versteckt, was ist nicht markiert. Ich möchte aber auch, dass alle divs wieder angezeigt werden, wenn alles deaktiviert ist. Hilfe?

Answer 1

Sie können die Länge der angekreuzte Kästchen erhalten und wenn er zurück 0 (falsch) zeigen dann()

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

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

bearbeitenreturn Verwendung wird vom Laufen den Rest des Codes zu stoppen.

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

});