javascript - applying different checkbox filters to show/hide divs -


currently checkbox filtering not working, making grid-cell div's dissapear when selected.

i show categories if nothing select or if selected.

if area: north selected show items matching north, if south selected show items matching south , if both north , south selected show items matching either north or south.

i same price if high selected show high , if both high , low selected show high , low.

if area selected north , south , price low show items containing 3

e.g items has data-category-type="high" or data-category-name="north" or data-category-name="south"

http://jsfiddle.net/yzyyqqey/3/

$('.checkbox').on('click', function (e) { var $this = $(this),     $links = $('.checkbox');  if ($this.hasclass('selected')) {     $this.removeclass('selected'); } else {     $this.addclass('selected'); }  $('.grid-cell').hide(); if ($(".checkbox:checked").length > 0) {     // 1 checked     $.each($links, function (k, v) {         $this = $(v);         if ($this.hasclass('selected')) {             anyselectedcheckbox = true;             var cat = $this.data('categorytype');             var nam = $this.data('categoryname');             $('.grid-cell:has(div[data-category-type="' + cat + '"],div[data-category-name="' +nam+' "] )').show();         }      }); } else {     // none checked     $('.grid-cell').show(); } }); 

ok, try this. updated jsfiddle mistake had high set 4 cells.

$('.checkbox').on('click', function (e) {     var $this = $(this),         $links = $('.checkbox');      if ($this.hasclass('selected')) {         $this.removeclass('selected');     } else {         $this.addclass('selected');     }      $('.grid-cell').hide();     if ($(".checkbox:checked").length > 0) {         applyallfilters();     } else {         // none checked         $('.grid-cell').show();     } });  function applyallfilters() {     var selectedpricesfilterqry = $(".checkbox.pricefilter:checked").map(function() {                  return '[data-category-type=' + $(this).data('categorytype') + ']';               }).get()+''      var selectedareasfilterqry = $(".checkbox.areafilter:checked").map(function() {                  return '[data-category-name=' + $(this).data('categoryname') + ']';               }).get()+''    var filteredresults = {};     if(selectedpricesfilterqry != '')          filteredresults  = $('.grid-cell').filter(selectedpricesfilterqry);     else         filteredresults  = $('.grid-cell');     if(selectedareasfilterqry != '')          filteredresults = $(filteredresults).filter(selectedareasfilterqry);     $(filteredresults).show(); } 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -