CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Liondj
Liondj

Reputation: 48

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

Upvotes: 0

Views: 60

Answers (2)

Steve Clason
Steve Clason

Reputation: 301

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

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

I would suggest setting value of checkbox to match id of div

<input type="checkbox" class="cb-hide" value="offer-1">
<div id="offer-1" class="hot-offer></div>

Then use toggle() method to hide/show

$('.cb-hide').change(function(){
    $('#'+ this.value).toggle(this.checked);   
});

A boolean passed to toggle() tells it whether to hide or show the element(s)

Upvotes: 0

Related Questions