Filter mit mehreren Kontrollkästchen in PHP

Question

Ich muss den Inhalt mit jquery filtern, aber ich muss alle Inhalte anzeigen, wenn kein Kontrollkästchen ausgewählt ist.

Hier ist mein Code:

 <div class="tags"> 
    <label> 
     <input type="checkbox" rel="arts" /> 
     Arts 
    </label> 
    <label> 
     <input type="checkbox" rel="computers" /> 
     Computers 
    </label> 
    <label> 
     <input type="checkbox" rel="health" /> 
     Health 
    </label> 
    <label> 
     <input type="checkbox" rel="video-games" /> 
     Video Games 
    </label> 
</div> 
<ul class="results"> 
    <li class="arts computers">Result 1</li> 
    <li class="video-games">Result 2</li> 
    <li class="computers health video-games">Result 3</li> 
    <li class="arts video-games">Result 4</li> 
    <li class="arts video-games">Result 6</li> 
</ul> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script> 

$(document).ready(function() { 
     $('.results > li').show(); 

     $('div.tags').find('input:checkbox').on('click', function() { 
      $('.results > li').hide(); 
      $('div.tags').find('input:checked').each(function() { 
       $('.results > li.' + $(this).attr('rel')).show(); 
      }); 
     }); 
    });  
</script> 

onload es alle Inhalte zeigt. Aber wenn ich alle Checkboxen abnehme, verstecken sich alle <li> Inhalte. Stattdessen muss ich den gesamten Inhalt anzeigen, wenn ich alle Kontrollkästchen nach der Abwahl abnehme.

Answer 1

hinzufügen checks Klasse auf alle Ihre Kontrollkästchen class="checks" dann können Sie eine if/else bedingte Anweisung verwenden, während .change() und .show() verwenden.

d.h .: <input type="checkbox" rel="arts" class="checks" /> usw.

Hinweis: Ich bin kein JS Guru, aber der folgende Zusatz unter Ihrem <script>...</script> bestehenden platziert werden tun, was Sie erreichen wollen.

<script type="text/javascript"> 

$('.checks').change(function(){ 
    if(this.checked) { 

    $('.checks').show(); 

} 

else{ 
    $('.checks').hide(); 
} 

}); 

</script> 

Answer 2

ändern Kontrollkästchen wie folgt aus:

<input type="checkbox" data-type="computers" /> 

und dann:

$('.tag checkbox').on('change', function() { 
    chckbxType = $(this).data('type'); 
    $('.results li').each(function() { 
     $(this).hasClass(chckbxType) ? $(this).show() : $(this).hide(); 
    } 
} 

Es ist nicht die beste Lösung, aber es funktioniert;) für die Qualität des Codes zu verbessern Sie überprüfen sollten, Sichtbarkeit vor der Verwendung anzeigen oder ausblenden ...

Answer 3

Auf checkbox klicken Sie auf, ob checkbox ist aktiviert oder nicht. Wenn checkbox ausgewählt ist, dann gefilterte Ergebnisse anzeigen sonst alle Ergebnisse anzeigen.

<script> 

$(document).ready(function() { 

    $('div.tags').find('input:checkbox').on('click', function() { 
     if($('div.tags input:checked').length > 0){ // check 
      $('.results > li').hide(); 
      $('div.tags').find('input:checked').each(function() { 
       $('.results > li.' + $(this).attr('rel')).show(); 
      }); 
     } 
     else{ 
      $('.results > li').show(); 
     } 
    }); 

});  
</script>