PHPで複数のチェックボックスを使用したフィルタ

Question

jqueryを使用してコンテンツをフィルタリングする必要がありますが、チェックボックスを選択しないとすべてのコンテンツを表示する必要があります。それは、すべての内容を示して

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

は、ここに私のコードです。しかし、すべてのチェックボックスの選択を解除すると、<li>のすべてのコンテンツが非表示になります。代わりに、選択解除後にすべてのチェックボックスの選択を解除すると、すべてのコンテンツを表示する必要があります。

Answer 1

は、すべてのチェックボックスにclass="checks".change()と.show()を使用している間、あなたは、if/else条件文を使用することができますがchecksクラスを追加します。

すなわち：<input type="checkbox" rel="arts" class="checks" />など

注：私は、JSの第一人者ないんだけど、既存の<script>...</script>の下に配置される以下の追加は、あなたが達成したいものを行います。このような

<script type="text/javascript"> 

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

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

} 

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

}); 

</script> 

Answer 2

変更チェックボックス：その後、

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

と：

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

それが最善の解決策ではないが、それは動作します。あなたがチェックする必要があり、このコードの品質を向上させるための）表示または非表示を使用する前の表示...

Answer 3

オンcheckboxクリックしてチェックしてくださいcheckboxがチェックされているかどうかを確認します。 checkboxがチェックされている場合は、フィルタリングされた結果を表示し、それ以外の場合はすべての結果を表示します。

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