Liondj Liondj - 5 months ago 8
jQuery Question

How to use checkboxes to make filters?

I`m trying to make a filter out of checkboxes. I tried lots of ways with jQuery and JavaScript, but non of them 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 it still doesn`t work as planed. I'm trying to make a filler so when none of the checkboxes are :checked, all of the .hot-offer divs are displayed. But when a specific checkbox is :checked, for example .150e, my html file would only show those divs linked to the box.

Here is my jQuery script:

$(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();
}
});
});

Answer

I think this works like you want:

$(function () {
    $( 'input:checkbox' ).click( function( e ) {
      var name = $( this ).prop( 'name' );
      var offerClass = '.hot-offer.s' + name ;
      console.log( 'offerClass: ' + offerClass );
      $( '.hot-offer' ).hide();
      if ( $( this ).prop( 'checked' ) === true ){
        $( offerClass ).show();
      }

      var anyChecked = false;
      $( 'input' ).each( function() {
        if ($( this ).prop( 'checked' ) === true ) {
          anyChecked = true;
        }
      });
      if( anyChecked === false ) {
        $( '.hot-offer' ).show();
      }
    });


})();

I'm sure it could be more elegant but I'm tired.

Pen here: http://codepen.io/SteveClason/pen/qNdMPR

Comments