Isotope filtering using checkboxes issue

Question

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 1

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

NOTE to other SO readers: "isotope" is a cool js library .