Sergiti Sergiti - 4 months ago 53
jQuery Question

Isotope filtering using checkboxes issue

I'm trying to make filtering Isotope to work out but I'm stuck.

I have two lists of checkbox filters in which every list there is a clear-list button, in order to uncheck the checkboxes in their list and one clear-all button that unchecks all the checkboxes and does isotope({filter: '*' }) when clicked, which is desired.

My problem is that I cannot figure out how to make the clear-list button to isotope the grid container when a clearlist button is clicked.
Logically, the grid container must isotope without the values of the certain list.
And when all lists are clear with the clear-list button then the grid should isotope({ filter: '*' })

Here is my js code

function initIsotope(){

var $wrapper = $('.wrapper');

if($wrapper.length < 1){
return;
}

var $filters = $('.filters', $wrapper);
var $grid = $('.grid-container', $wrapper);
var $checkboxList = $ ('.checkbox-list', $wrapper);
var $checkboxes = $('.checkbox-control', $wrapper);
var $clearList = $('.clear-list', $wrapper);
var $clearAll= $('.clear-all', $wrapper);

//init Isotope
$grid.isotope({

itemSelector: '.grid-item',
layoutMode: 'fitRows'

});

//isotope filtering on checkbox click
// this part of code is from http://jsfiddle.net/desandro/DQydj/
$checkboxes.change(function(){

var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
});

filters = filters.join(', ');
$grid.isotope({ filter: filters });
});



//clear list
$clearList.on('click', function(e){

e.preventDefault();

var $self = $(this);

$self.closest($checkboxList).find($checkboxes).prop("checked", false);

//Im stuck here

});




//clear-all lists
$clearAll.on('click',function(e){

e.preventDefault();
$checkboxes.prop("checked", false);

$grid.isotope({ filter: '*' });

});



}



$(function(){
initIsotope();
});


Have jsfiddle example for you to see:
https://jsfiddle.net/timosergio/at7gtc1g/35/

Can you help me out please?

PS: I've updated my jsFiddle, I'm closer but to the desire result. Check it out if you mind

Answer

The only thing missing in your $clearList.on('click'), after having the correct closest($checkboxList) cleared is to "reset" the filter array... And "repopulate" it with the possible values of the other checkbox-list.

// Empty filter array
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
  filters.push( this.value );
});

filters = filters.join(', ');
$grid.isotope({ filter: filters });

Like you do in the function $checkboxes.change...
You send a value array to grid.isotope to use as filter.

You already do the right thing in $clearAll.on('click')
You are sending '*'.

EDIT
I just updated my fiddle to simplify the script by avoiding redundant code.
I made a "sub-function" with the part that gets the checkboxes values.
;)

Updated Fiddle