チェックボックスに基づいてdivを表示したり非表示にしたりする

Question

私は多くのdivを持っていますが、すべてがクラスproduct_listingです。それらはすべてプロパティを持ち、accessory、hardware、mobile、またはsoftwareのいずれかです。私のjavascriptでは、自分のカテゴリのチェックボックスをオンにしたものだけを表示したい。 HTMLでの私のチェックボックスは次のようにコード化されています。私のJavaScriptで

<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 /> 

私は配列accessory_products、hardware_products、mobile_products、およびsoftware_productsを持っているので、私はちょうど確認ボックスに基づいてそれらを表示し、非表示にする必要があります。私はちょうどチェックボックスをチェックするifステートメントを作成する方法を知りません。誰も助けることができますか？私はもちろん、jqueryを使用しています。

Answer 1

今後、コードをしようとしたことを表示することをお勧めします。これは、スタックユーザーがあなたを助け、間違った場所を支援するためです。

ここでは方向性を指摘する必要があります。完全ではありませんが、ソリューションを完成させるのに役立ちます。

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

おかげ