Sorting The Improved

by Elijah Tate

HTML

<div class="main">
    <input class="featureChbx" type="checkbox" data-feature="wireless">Wireless</div>
<input class="featureChbx" type="checkbox" data-feature="bluetooth">BlueTooth</div>
<div class="parent">
    <div class="colParent blue" data-feature="wireless_bluetooth"></div>
    <div class="colParent black" data-feature="wireless"></div>
    <div class="colParent gray" data-feature="bluetooth"></div>
</div>
</div>

CSS

.colParent {
    width: 50px;
    height: 50px;
}
.blue {
    background: blue;
}
.black {
    background: black;
}
.gray {
    background: gray;
}

JavaScript

var compassFeatures = ["wireless", "bluetooth"];
var checkboxes = [];
var checkedValues = [];

function setCheckboxes() {
    var divFeatures = compassFeatures.join("_");

    $.each(compassFeatures, function (indx, feat) {
        var checkbox = $('[data-feature=\"' + feat + '\"]');
        checkboxes.push(checkbox);
        checkbox.click(function () {
            sort();
        });

    });
}

function sort() {
    var filterValues = "";
    checkedValues.length = 0;
    alert("sorting");
    $.each(checkboxes, function (indx, val) {
        if ((val).is(':checked')) {
            var id = val.attr('data-feature');
            checkedValues.push(id);
        }
    });
    filter();
}

function filter() {
    var filterElements = $(".colParent");

    if (checkedValues.length > 0) {

        $.each(filterElements, function (indx, elem) {
            var matches = 0;
            $.each(checkedValues, function (indx, val) {

                var dFeature = $(elem).attr('data-feature');
                alert("DFEATURE " + dFeature);

                if (dFeature.toLowerCase().indexOf(val) > -1) {
                    matches++;
                }
            });
			if(matches < checkedValues.length){               
                $(elem).css("display", "none");
            }else{
             	$(elem).css("display", "block");   
            }
        });

    } else {
        alert("Empty array of checked values");
        $.each(filterElements, function (indx, elem) {
            $(elem).css("display", "block");
        });
    }
}

setCheckboxes();