jQuery isotope combination filter with checkbox and jQuery iCheck

Question

I don't know javascript at all so have been trying to piece it together, I've got the isotope working and have styled the checkboxes with iCheck.

This is the isotope effect I am trying to achieve - multiple combination filters: http://codepen.io/desandro/pen/btFfG

Without iCheck, the functionality works OK, but once iCheck is added, the checkboxes aren't working - the filtering is still working.

Eg. On load, "Any Bedrooms" is checked by default. When "4 bedrooms" is checked, "Any Bedrooms" should uncheck. And then if I was to uncheck "4 bedrooms" then "Any Bedrooms" needs to be checked again.

I've made a little fiddle here: http://jsfiddle.net/KW5H2/1/

    jQuery('input').each(function () {
    var self = jQuery(this),
        label = self.next(),
        label_text = label.text();

    label.remove();
    self.iCheck({
        checkboxClass: 'icheckbox_line-red',
        radioClass: 'iradio_line',
        insert: '<div class="icheck_line-icon"></div>' + label_text
    });
});

var jQuerycontainer;
var filters = {};

jQuery(function () {

    jQuerycontainer = jQuery('#container');

    jQuerycontainer.imagesLoaded(function () {
        jQuerycontainer.fadeIn().isotope({
            itemSelector: '.element'
        });
    });

    jQuerycontainer.isotope();
    // do stuff when checkbox change
    jQuery('#options').on('ifChanged', function (jQEvent) {
        var jQuerycheckbox = jQuery(jQEvent.target);
        manageCheckbox(jQuerycheckbox);

        var comboFilter = getComboFilter(filters);

        jQuerycontainer.isotope({
            itemSelector: '.element',
            filter: comboFilter


        });

    });

});

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(jQuerycheckbox) {
    var checkbox = jQuerycheckbox[0];

    var group = jQuerycheckbox.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 = jQuerycheckbox.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 = jQuery.inArray(checkbox.value, filterGroup);

    if (checkbox.checked) {
        var selector = isAll ? 'input' : 'input.all';
        jQuerycheckbox.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 (!jQuerycheckbox.siblings(':checked').length) {
            jQuerycheckbox.siblings('input.all').attr('checked', 'checked');
        }
    }

}

Please can someone shed some light?

Answer 1

Its a little late but maybe if you are still interested, you can redesign your code like [myfiddle][1].
When you use isotope V2 result will be better.

  [1]: http://jsfiddle.net/Cagdas/rm7o686v/2/