Multiple checkbox selection (filter) for products

Question

I'm trying to make a filter for products, I retrieve products from the database, including the image and some information, and I need some filters, such as: PRODUCT and BRAND

I have this code, but when I select two filters, for example, brand 1 + product 2, which shows me all products of brand 1 and all products of number 2 .. and I want this to be combined ...

Here is 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 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 client side of the product using jquery or javascript, and not from the server side with requests.

Save the list of your flags and products 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 used jQuery for filtering. Hope you are also trying to use 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> 

Here it is! You are saved. Let me know if you have any problems.

Answer 2

The most problematic lines of your code (regarding filtering) are probably the following two:

 $('.row >div[data-category=' + this.value + ']').show(); $('.row >div[brand=' + this.value + ']' ).show(); 

Here you explicitly indicate " show all divs where data-category = value and show all divs where brand = value".

What you really want is to " show all divs where data-category = value and brand = value".

You might want to try something like

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

Also, some additional fixes in your code (not related to your filtering issue):

1) Indeed the ability to directly enter sql in

 $sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'"; 

2) You attach the click event to each in the DOM, even if the flags are not intended for filtering, it would also be more appropriate to use the change event instead of the click event (you can also change the state of the flag using the keyboard, and not just with a mouse click)

 $('input[type="checkbox"]').click(function() { 

Answer 3

If I understand your question correctly, you need to increase your $ sql statement so that you only retrieve the data needed for the report:

 $sql='SELECT * FROM products'; // Pull everything by default if (isset($_GET['category']) || isset($_GET['product'])) { //Only need the following if something was checked $sql.=' WHERE '; if (isset($_GET['category'])) { $sql.='category="' . $_GET['category'] . '"'; //Narrows down the results if (isset($_GET['product'])) { $sql.=' AND '; //Only necessary if both are checked } } if (isset($_GET['product'])) { $sql.='product="' . $_GET['product'] . '"'; //Narrows down the results...more if both were checked } } 

If you only run this when something is being checked, the first condition is not necessary, although I am sure that this will not happen.

Answer 4

Let it be simple here.

Instead of hiding everything and then just showing some, show all and then hide those that DO NOT match.

 // Show all at the beginning $('.row >div').show(); // For each item... $('.row > div ).each(function(){ var $item = $(this); // Check against each checkbox... $('input[type="checkbox"]:checked').each(function() { var $checkbox = $(this), pass = false; if($item.attr('data-category') == $checkbox.value) pass = true; if($item.attr('brand') == $checkbox.value) pass = true; // and if the brand or category doesn't match the checkbox value, hide it if(!pass) $item.hide(); }); });