samedi 4 juin 2016

How to use checkboxes to make filters

Oke, so I`m trying to make a filter out of checkboxes. I tried lots of ways with jquery and js, but non of thm worked. Here is the html file:

 <form class="size-form">
            <input type="checkbox" name="min50" class="cb-hide 50e"> меньши 50.000€ <br>
            <input type="checkbox" name="50-100" class="cb-hide 100e"> 50.000€-100.000€ <br>
            <input type="checkbox" name="100-150" class="cb-hide 150e"> 100.000€-150.000€ <br>
            <input type="checkbox" name="150-200" class="cb-hide 200e"> 150.000€-200.000€ <br>
            <input type="checkbox" name="200-300" class="cb-hide 300e"> 200.000€-300.000€ <br>
            <input type="checkbox" name="50-100" class="cb-hide over300e">    более 300.000€ <br>
 </form>
 <div class="menu">
  <div class="hot-offer p150 s150-200 beograd ">
     <div class="img-and-price">
         <img class="img" src="img/noimg.png" width="280px" height="220px">
     </div>
       <h4 class="offer-location">grad-opstina-ulica</h4>
       <p class="price">90000€</p>
         <p class="size">90m<sup>2</sup></p>
   </div>
   <div class="hot-offer">
     <div class="img-and-price">
         <img class="img" src="img/noimg.png" width="280px" height="220px">
     </div>
       <h4 class="offer-location">grad-opstina-ulica</h4>
       <p class="price">90000€</p>
         <p class="size">90m<sup>2</sup></p>
   </div>
  <div class="hot-offer">
     <div class="img-and-price">
         <img class="img" src="img/noimg.png" width="280px" height="220px">
     </div>
       <h4 class="offer-location">grad-opstina-ulica</h4>
       <p class="price">90000€</p>
         <p class="size">90m<sup>2</sup></p>
   </div>
 </div>`

This is the closest i got, but still doesn`t work as planed. I'm trying to make a filler so when non of the checkboxes are :checked, all of the .hot-offer divs are displaied. But when a specific checkbox is :checked, for exemple .150e, my html file would only show those divs linked to the box. heres the closest:

$(function () {
    $(".cb-hide").click(function () {
        if ($(this).is(":checked")) {
            $(".hot-offer").hide();
        } else {
            $(".hot-offer").show();
        }
    });
});

$(function () {
    $(".cb-hide").click(function () {
        if ($(this).is(":checked")) {
            $(".p150-200").show();
        } else {
            $(".p150-200").hide();
        }
    });
});




Aucun commentaire:

Enregistrer un commentaire