Q:

MultiFiltering with JQuery and Data attributes

I am attempting to make a multi filter using the data attribute on a div,JQuery, and check boxes. When a checkbox is selected I want JQuery to remove the elements on the screen that's data attribute doesn't contain all the selected items. 
For example of one check box' values = 'mens' and the other is 'metal' then the elements on the screen that do not match those will fade or hide. 
Here is a sample div with the data attrbute:
<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes='["men's","wayfarer","metal","134","133","black","black"]'></div>

And the filtering block includes:
<div class="information-blocks">
                    <div class="block-title size-2">Gender</div>
                    <label class="checkbox-entry">
                        <input type="checkbox" value="men's" class="filter" name="filter[]" /> <span class="check"></span> Men's
                    </label>
                    <label class="checkbox-entry">
                        <input type="checkbox" value="women's" class="filter" name="filter[]" /> <span class="check"></span> Women's
                    </label>
                    <label class="checkbox-entry">
                        <input type="checkbox" value="unisex" class="filter" name="filter[]" /> <span class="check"></span> Unisex
                    </label>
            </div>
            <div class="information-blocks">
                <div class="block-title size-2">Frame Material </div>
                <label class="checkbox-entry">
                    <input type="checkbox" value="metal" class="filter" name="filter[]" /> <span class="check"></span> Metal Frames
                </label>
                <label class="checkbox-entry">
                    <input type="checkbox" value="plastic" class="filter" name="filter[]" /> <span class="check"></span> Plastic Frames
                </label>
                <label class="checkbox-entry">
                    <input type="checkbox" value="wood" class="filter" name="filter[]" /> <span class="check"></span> Wood Frames
                </label>
            </div>

I am using:
$('.filter').on('click',function(){
            //
});

to capture the selection values but I am not sure how to collect all those that are currently selected and then use that list to start to remove the items from the divs that do not contain those values in the data attribute.
Any help would be greatly appreciated or let point me in the right direction. I have been looking at tutorials and other libraries but I don't see anything that allows me to use multiple sources and filter out on the data attribute instead of a class.

A:

First you must change your shop-grid-item attribute to look like this : 
<div class="col-md-3 col-sm-4 shop-grid-item" id="BSG016BK" data-attributes="['men\'s','wayfarer','metal','134','133','black','black']">
</div>

After that, you just need to get the appropriated data-attribute and compare with your filters.
Here a JSFiddle that show in console the attributes as an array.

