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