danjbh danjbh - 9 days ago 6
jQuery Question

Isotope grid checkbox selection

I am using the Isotope lib to filter out items but I was wondering if there was a way to add check boxes also to enable like mutlple selections?

I have created a fiddle to demonstrate where I am at:

https://jsfiddle.net/arkau0gg/

My Scripts file looks like this:

$(function(){

var $container = $('#container'),
$filterLinks = $('#filters a');

$container.isotope({
itemSelector: '.item',
filter: '.red'
});

$filterLinks.click(function(){
var $this = $(this);

// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}

$filterLinks.filter('.selected').removeClass('selected');
$this.addClass('selected');

// get selector from data-filter attribute
selector = $this.data('filter');

$container.isotope({
filter: selector
});


});

});

Answer

You can cycle on checkboxes and take data-filter attribute for those checked. Like this javascript:

$(function(){
  var $container = $('#container'),
      $filterLinks = $("input[type='checkbox']");

  $container.isotope({
    itemSelector: '.item',
    filter: '.red'
  });

  $filterLinks.change(function(){
    var selector= '';
    $filterLinks.each(function(){
        if($(this).prop('checked')){
        if(selector != '') selector += ',';
        selector += $(this).data('filter');
      }
    });

    if(selector){
      $container.isotope({
        filter: selector
      });
    }


  });

});

Try here: https://jsfiddle.net/rbkctham/