Ein- und Ausblenden meine divs basierend auf Kontrollkästchen

Question

Ich habe viele divs, die alle mit der Klasse product_listing. Sie alle haben eine data-category Eigenschaft, die entweder accessory, hardware, mobile oder software. In meinem Javascript möchte ich nur diejenigen anzeigen, deren Kontrollkästchen aktiviert ist. Meine Kontrollkästchen in der HTML codiert als:

<input type="checkbox" name="category_filter" value="all" 
checked="checked">&nbsp;All</input><br /> 

<input type="checkbox" name="category_filter" 
value="accessory">&nbsp;Accessory<br /> 

<input type="checkbox" name="category_filter" 
value="hardware">&nbsp;Hardware<br /> 

<input type="checkbox" name="category_filter" value="mobile">&nbsp;Mobile 
App<br /> 

<input type="checkbox" name="category_filter" 
value="software">&nbsp;Software<br /> 

In meinem Javascript habe ich die Arrays accessory_products, hardware_products, mobile_products und software_products, so muss ich nur sie zeigen und verstecken basierend auf kreuzte Kästchen. Ich weiß einfach nicht, wie ich die if-Anweisungen machen soll, um zu überprüfen, welche Kästchen überprüft werden. Kann jemand helfen? Ich benutze natürlich jQuery.

Answer 1

In Zukunft Anzeigen Ich würde empfehlen, was Sie Code versucht haben, so stapeln können Sie helfen und unterstützen mit dem Sie schief gelaufen.

Hier ist etwas, das Sie in die Richtung zeigen sollte - es ist nicht vollständig, sondern wird Ihnen helfen, Ihre Lösung bei der Fertigstellung.

https://codepen.io/zell71/pen/gXpbKb

HTML:

<input type="checkbox" class="category_filter" value="all" checked="checked">&nbsp;All</input> 
<br /> 

<input type="checkbox" class="category_filter" value="accessory">&nbsp;Accessory 
<br /> 

<input type="checkbox" class="category_filter" value="hardware">&nbsp;Hardware 
<br /> 

<input type="checkbox" class="category_filter" value="mobile">&nbsp;Mobile App 
<br /> 

<input type="checkbox" class="category_filter" value="software">&nbsp;Software 
<br /> 

<div class="wrapper"> 
    <div class="products" data-category="accessory"> 
    <h3>Accessory</h3> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
    </div> 
    <div class="products" data-category="hardware"> 
    <h3>Hardware</h3> 
    <ul> 
     <li>item 4</li> 
     <li>item 5</li> 
     <li>item 6</li> 
    </ul> 
    </div> 
    <div class="products" data-category="mobile"> 
    <h3>Mobile App</h3> 
    <p> no results </p> 
    </div> 
    <div class="products" data-category="software"> 
    <h3>Software</h3> 
    <ul> 
     <li>item 7</li> 
     <li>item 8</li> 
     <li>item 9</li> 
    </ul> 
    </div> 
</div> 

JS:

$(".category_filter").change(function(e) { 
    var $this = $(this); 
    var inputValue = $this.val(); 
    // hide the products again 
    $(".products").hide(); 
    // check if the input box is checked so we don't display a collection that is being unchecked 
    if ($this.prop("checked")) {  
    console.log(inputValue); 
    if ((inputValue = "all")) { 
     $(".products").show(); 
    } else { 
     // show the product collection we need 
     $('.products[data-category="' + inputValue + '"]').show(); 
    } 
    } 
}); 

dank