jQuery Isotope Checkbox Function Issue

I'm having trouble getting the checkbox function to work properly. When a child filter item is selected (i.e. classic-panel-doors), it should uncheck the filter parent (door-style-all). I've attached the HTML & JS. A 'working' example on CodePen is below.

HTML

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-md-4">

      <h1>Categories</h1>

      <div id="options">

        <div class="option-set" data-group="door-style">
          <div class="checkbox">
            <label for="door-style-all"><input type="checkbox" value="" id="door-style-all" class="all" checked />door-style-all</label>
          </div>
          <div class="checkbox">
            <label for="classic-panel-doors"><input type="checkbox" value=".classic-panel-doors" id="classic-panel-doors" />classic-panel-doors</label>
          </div>
          <div class="checkbox">
            <label for="carriage-panel"><input type="checkbox" value=".carriage-panel" id="carriage-panel" />carriage-panel</label>
          </div>
          <div class="checkbox">
            <label for="overlay-carriage-house"><input type="checkbox" value=".overlay-carriage-house" id="overlay-carriage-house" />overlay-carriage-house</label>
          </div>
          <div class="checkbox">
            <label for="faux-wood-overlay"><input type="checkbox" value=".faux-wood-overlay" id="faux-wood-overlay" />faux-wood-overlay</label>
          </div>
          <div class="checkbox">
            <label for="wood-doors"><input type="checkbox" value=".wood-doors" id="wood-doors" />wood-doors</label>
          </div>
          <div class="checkbox">
            <label for="full-view-aluminum"><input type="checkbox" value=".full-view-aluminum" id="full-view-aluminum" />full-view-aluminum</label>
          </div>
        </div>

        <div class="option-set" data-group="material">
          <div class="checkbox">
            <label for="material-all"><input type="checkbox" value="" id="material-all" class="all" checked />material-all</label>
          </div>
          <div class="checkbox">
            <label for="aluminum"><input type="checkbox" value=".aluminum" id="aluminum" />aluminum</label>
          </div>
          <div class="checkbox">
            <label for="fiberglass"><input type="checkbox" value=".fiberglass" id="fiberglass" />fiberglass</label>
          </div>
          <div class="checkbox">
            <label for="steel"><input type="checkbox" value=".steel" id="steel" />steel</label>
          </div>
          <div class="checkbox">
            <label for="wood"><input type="checkbox" value=".wood" id="wood" />wood</label>
          </div>
        </div>

        <div class="option-set" data-group="insulation-type">
          <div class="checkbox">
            <label for="insulation-type-all"><input type="checkbox" value="" id="insulation-type-all" class="all" checked />insulation-type-all</label>
          </div>
          <div class="checkbox">
            <label for="non-insulated"><input type="checkbox" value=".non-insulated" id="non-insulated" />non-insulated</label>
          </div>
          <div class="checkbox">
            <label for="polystyrene"><input type="checkbox" value=".polystyrene" id="polystyrene" />polystyrene</label>
          </div>
          <div class="checkbox">
            <label for="polyurethane"><input type="checkbox" value=".polyurethane" id="polyurethane" />polyurethane</label>
          </div>
        </div>

        <div class="option-set" data-group="colors">
          <div class="checkbox">
            <label for="colors-all"><input type="checkbox" value="" id="colors-all" class="all" checked />colors-all</label>
          </div>
          <div class="checkbox">
            <label for="almond"><input type="checkbox" value=".almond" id="almond" />almond</label>
          </div>
          <div class="checkbox">
            <label for="bronze"><input type="checkbox" value=".bronze" id="bronze" />bronze</label>
          </div>
          <div class="checkbox">
            <label for="brown"><input type="checkbox" value=".brown" id="brown" />brown</label>
          </div>
          <div class="checkbox">
            <label for="cedar-unfinished"><input type="checkbox" value=".cedar-unfinished" id="cedar-unfinished" />cedar-unfinished</label>
          </div>
          <div class="checkbox">
            <label for="desert-tan"><input type="checkbox" value=".desert-tan" id="desert-tan" />desert-tan</label>
          </div>
          <div class="checkbox">
            <label for="evergreen"><input type="checkbox" value=".evergreen" id="evergreen" />evergreen</label>
          </div>
          <div class="checkbox">
            <label for="gray"><input type="checkbox" value=".gray" id="gray" />gray</label>
          </div>
          <div class="checkbox">
            <label for="mahogany-unfinished"><input type="checkbox" value=".mahogany-unfinished" id="mahogany-unfinished" />mahogany-unfinished</label>
          </div>
          <div class="checkbox">
            <label for="oak"><input type="checkbox" value=".oak" id="oak" />oak</label>
          </div>
          <div class="checkbox">
            <label for="walnut"><input type="checkbox" value=".walnut" id="walnut" />walnut</label>
          </div>
          <div class="checkbox">
            <label for="white"><input type="checkbox" value=".white" id="white" />white</label>
          </div>
          <div class="checkbox">
            <label for="woodtone-mahogany"><input type="checkbox" value=".woodtone-mahogany" id="woodtone-mahogany" />woodtone-mahogany</label>
          </div>
          <div class="checkbox">
            <label for="woodtone-oak"><input type="checkbox" value=".woodtone-oak" id="woodtone-oak" />woodtone-oak</label>
          </div>
          <div class="checkbox">
            <label for="woodtone-walnut"><input type="checkbox" value=".woodtone-walnut" id="woodtone-walnut" />woodtone-walnut</label>
          </div>
        </div>

      </div>

    </div>

    <div class="col-xs-12 col-md-8">

      <div id="container" class="isotope">

        <div class="grid-sizer"></div>

        <div class="grid-item classic-panel-doors wood non-insulated isotope-item">
          <p>classic-panel-doors</p>
          <p>wood</p>
          <p>non-insulated</p>
        </div>

        <div class="grid-item carriage-panel fiberglass polystyrene isotope-item">
          <p>carriage-panel</p>
          <p>fiberglass</p>
          <p>polystyrene</p>
        </div>

        <div class="grid-item overlay-carriage-house steel polystyrene isotope-item">
          <p>overlay-carriage-house</p>
          <p>steel</p>
          <p>polystyrene</p>
        </div>

        <div class="grid-item faux-wood-overlay fiberglass non-insulated isotope-item">
          <p>faux-wood-overlay</p>
          <p>fiberglass</p>
          <p>non-insulated</p>
        </div>

        <div class="grid-item wood-doors wood non-insulated isotope-item">
          <p>wood-doors</p>
          <p>wood</p>
          <p>non-insulated</p>
        </div>

        <div class="grid-item full-view-aluminum aluminum polyurethane isotope-item">
          <p>full-view-aluminum</p>
          <p>aluminum</p>
          <p>polyurethane</p>
        </div>

      </div>

    </div>

  </div>
</div>

JS

var $container;
var filters = {};

$(function(){

  $container = $('#container');

  $container.isotope();
  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );

    var comboFilter = getComboFilter( filters );

    $container.isotope({ 
      filter: comboFilter,
      transitionDuration: '.5s',
      itemSelector: '.grid-item',
      percentPosition: true,
      masonry: {
        // use element for option
        columnWidth: '.grid-sizer'
      }
    });

  });

});

function getComboFilter( filters ) {
  var i = 0;
  var comboFilters = [];
  var message = [];

  for ( var prop in filters ) {
    message.push( filters[ prop ].join(' ') );
    var filterGroup = filters[ prop ];
    // skip to next filter group if it doesn't have any values
    if ( !filterGroup.length ) {
      continue;
    }
    if ( i === 0 ) {
      // copy to new array
      comboFilters = filterGroup.slice(0);
    } else {
      var filterSelectors = [];
      // copy to fresh array
      var groupCombo = comboFilters.slice(0); // [ A, B ]
      // merge filter Groups
      for (var k=0, len3 = filterGroup.length; k < len3; k++) {
        for (var j=0, len2 = groupCombo.length; j < len2; j++) {
          filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
        }

      }
      // apply filter selectors to combo filters for next group
      comboFilters = filterSelectors;
    }
    i++;
  }

  var comboFilter = comboFilters.join(', ');
  return comboFilter;
}

function manageCheckbox( $checkbox ) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[ group ];
  if ( !filterGroup ) {
    filterGroup = filters[ group ] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if ( isAll ) {
    delete filters[ group ];
    if ( !checkbox.checked ) {
      checkbox.checked = 'checked';
    }
  }
  // index of
  var index = $.inArray( checkbox.value, filterGroup );

  if ( checkbox.checked ) {
    var selector = isAll ? 'input' : 'input.all';
    $checkbox.siblings( selector ).removeAttr('checked');


    if ( !isAll && index === -1 ) {
      // add filter to group
      filters[ group ].push( checkbox.value );
    }

  } else if ( !isAll ) {
    // remove filter from group
    filters[ group ].splice( index, 1 );
    // if unchecked the last box, check the all
    if ( !$checkbox.siblings('[checked]').length ) {
      $checkbox.siblings('input.all').attr('checked', 'checked');
    }
  }

}

Here is a link to the pen - http://ift.tt/1FFlvy4

And here is an example of how it SHOULD work - http://ift.tt/18EQ4PE