Multiple checkbox selection (filter) for products

Question

What I'm trying to do is to make a filter for products, I'm retrieving products from the database including an image and some information, and I want some filters like: PRODUCT and BRAND

I have this code but when I select two filters like brand 1 + product 2 that shows me all products of brand 1 and all products number 2.. and I want it combined...

Here's my code:

HTML+PHP

<div id="row" class="row">

<?php

if(!empty($_GET["category"])){
  include('open_conexion.php');
  $sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";

  $result = mysql_query($sql);

  while ($row = mysql_fetch_array($result)) {

  ?>

  <div class="col-lg-4"  data-category="<?php echo $row['product'];?>" brand="<?php echo $row['brand'];?>" >
      <img  class="img-circle" src='images/<?php echo $row['imag']; ?>'  width="180px;" height="180px;"alt="">
      <h4><?php echo $row['product']." ". $row['brand']; ?></h4>
      <p><?php echo $row['description'];?> </p>
      <p><a class="btn btn-default" href='detalles.php?id=<?php echo $row['id_product']?>'>View Details &raquo;</a></p>

</div><!-- /.col-lg-4 -->



  <?php } } ?>


  </div><!-- /.row -->

and the jQuery:

 <script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
    $('.row >div').hide();


    $('input[type="checkbox"]:checked').each(function() {
        $('.row >div[data-category=' + this.value + ']').show();
        $('.row >div[brand=' + this.value + ']' ).show();

    });
} else {
    $('.row >div').show();


}
});

Thanks

Answer 1

I assume that you are trying to filter the products client side using jquery or javascript and not with server side with queries.

Keep your checkboxes and products list as shown below:

<div><input name="product1" id="product1" data-id="1" class="products" type="checkbox" />Product 1</div>
<div><input name="product2" id="product2" data-id="2" class="products" type="checkbox" />Product 2</div>
<div><input name="product3" id="product3" data-id="3" class="products" type="checkbox" />Product 3</div>
<div><input name="brand1" id="brand1" data-id="1" class="brands" type="checkbox" />Brand 1</div>
<div><input name="brand2" id="brand2" data-id="2" class="brands" type="checkbox" />Brand 2</div>
<div><input name="brand3" id="brand3" data-id="3" class="brands" type="checkbox" />Brand 3</div>
<div class="row">
    <div class="product" brand="1" data-category="1">product 1 brand 1</div>
    <div class="product" brand="1" data-category="1">product 1 brand 1</div>
    <div class="product" brand="2" data-category="1">product 1 brand 2</div>
    <div class="product" brand="2" data-category="1">product 1 brand 2</div>
    <div class="product" brand="3" data-category="1">product 1 brand 3</div>
    <div class="product" brand="3" data-category="1">product 1 brand 3</div>

    <div class="product" brand="1" data-category="2">product 2 brand 1</div>
    <div class="product" brand="1" data-category="2">product 2 brand 1</div>
    <div class="product" brand="2" data-category="2">product 2 brand 2</div>
    <div class="product" brand="2" data-category="2">product 2 brand 2</div>
    <div class="product" brand="3" data-category="2">product 2 brand 3</div>
    <div class="product" brand="3" data-category="2">product 2 brand 3</div>

    <div class="product" brand="1" data-category="3">product 3 brand 1</div>
    <div class="product" brand="1" data-category="3">product 3 brand 1</div>
    <div class="product" brand="2" data-category="3">product 3 brand 2</div>
    <div class="product" brand="2" data-category="3">product 3 brand 2</div>
    <div class="product" brand="3" data-category="3">product 3 brand 3</div>
    <div class="product" brand="3" data-category="3">product 3 brand 3</div>
</div>

Javascript code should be like this, i have used jQuery for filtering. Hope you are also trying with jQuery.

<script type="text/javascript">
$(function(){
    $('.products, .brands').on('click', function(){
        var checkedProducts = $('.products:checked');
        var checkedBrands = $('.brands:checked');
        if(checkedProducts.length || checkedBrands.length){
            if(checkedBrands.length === 0){
                $('.row > div').hide();
                $.each(checkedProducts, function(){
                    var prdId = $(this).attr('data-id');
                    $('.row > div[data-category="' + prdId + '"]').show();
                });
            } else if(checkedProducts.length === 0) {
                $('.row > div').hide();
                $.each(checkedBrands, function(){
                    var brandId = $(this).attr('data-id');
                    $('.row > div[brand="' + brandId + '"]').show();
                });
            } else {
                $('.row > div').hide();
                $.each(checkedProducts, function(){
                    var prdId = $(this).attr('data-id');
                    $.each(checkedBrands, function(){
                        var brandId = $(this).attr('data-id');
                        $('.row > div[data-category="' + prdId + '"][brand="' + brandId + '"]').show();
                    });
                });
            }
        } else {
            $('.row > div').show();
        }
    });
});
</script>

Thats it! You're saved.. Let me know if you have any issues.