lundi 13 novembre 2017

jQuery checkbox filter, working but want to reset when unchecked

I'm building a filter for a selection of condos. I've figured out how to filter using a slider and now also need to filter by number of bedrooms using two checkboxes.

<form name="filter" method="post" action="">
  <p>Bedrooms
    <input id="1bdrm" type="checkbox" value="1bdrm" />1 Bedroom
    <input id="2bdrm" type="checkbox" value="2bdrm" />2 Bedroom
  </p>
</form>

So far I have the filter limiting the selection to show only 1 bedroom units, but can't figure out how to reset and show all units when unchecking the checkbox.

// Set values for units
$('#cohen').data({
  id: 4,
  sqft: 976,
  bdrms: 2
});
$('#curnoe').data({
  id: 5,
  sqft: 572,
  bdrms: 2
});
$('#richler').data({
  id: 6,
  sqft: 624,
  bdrms: 2
});
$('#carr').data({
  id: 7,
  sqft: 544,
  bdrms: 1
});
$('#lawrence').data({
  id: 10,
  sqft: 467,
  bdrms: 1
});

//filter by number of bedrooms
$(document).ready(function() {
  var theValue;

  $("#1bdrm").click(function() {
    filterItems();
  });
});

function filterItems() {
  $.each($('.condo-box'), function() {
    $this = $(this);
    itemData = $this.data();
    if (itemData.bdrms == 1) {
      $this.show();
      itemData.matching = true;
    } else {
      $this.hide();
      itemData.matching = false;
    }
  });
}

Here's a fiddle link.. http://ift.tt/2zHmmOa I'm using the .data method to store unique attributes on each unit so that i can filter for each attribute (example: I have another script written for a slider that limits condos by sqft.

Hoping the community can point me in the right direction! Thanks in advance.

Marc.




Aucun commentaire:

Enregistrer un commentaire