JSFiddle - React, Tailwind, and code Playground

by pjobs

HTML

Price:<input type="checkbox" class="checkbox priceFilter" name="High" data-category-type="high">High
<input type="checkbox" class="checkbox priceFilter" name="low" data-category-type="low">Low

    Area:<input type="checkbox" class="checkbox areaFilter" name="low" data-category-name="north">north
    <input type="checkbox" class="checkbox areaFilter" name="low" data-category-name="south">south
        
<div class="wrap">
    <div class="grid grid--flexcells grid--gutters grid--1of2">
        <div class="grid-cell" data-category-type="high" data-category-name="north">
	        <div class="box">
                <a href="#"><div class="image"></div></a>
            </div>
        </div> 
        
        <div class="grid-cell" data-category-type="high" data-category-name="west">
	        <div class="box">
                <a href="#"><div class="image"></div></a>
            </div>
        </div>
        
        <div class="grid-cell" data-category-type="low" data-category-name="east">
	        <div class="box">
                <a href="#"><div class="image"></div></a>
            </div>
        </div>
        
        <div class="grid-cell" data-category-type="low" data-category-name="south">
	        <div class="box">
                <a href="#"><div class="image"></div></a>
            </div>
        </div>
</div>

CSS

.wrap {
    width:80%;
    height:200px;
    border:1px solid #ccc;
}
.grid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.grid--1of2 > .grid-cell {
    flex: 0 0 50%;
}
.image {
    width:100%;
    height:100px;
    border:1px solid #ff00ff
}

JavaScript

$('.checkbox').on('click', function (e) {
    var $this = $(this),
        $links = $('.checkbox');

    if ($this.hasClass('selected')) {
        $this.removeClass('selected');
    } else {
        $this.addClass('selected');
    }

    $('.grid-cell').hide();
    if ($(".checkbox:checked").length > 0) {
        ApplyAllFilters();
    } else {
        // none is checked
        $('.grid-cell').show();
    }
});

function ApplyAllFilters()
{
    var selectedPricesFilterQry = $(".checkbox.priceFilter:checked").map(function() {
                 return '[data-category-type=' + $(this).data('categoryType') + ']';
              }).get()+''
    
    var selectedAreasFilterQry = $(".checkbox.areaFilter:checked").map(function() {
                 return '[data-category-name=' + $(this).data('categoryName') + ']';
              }).get()+''
   var filteredResults = {};
    if(selectedPricesFilterQry != '') 
        filteredResults  = $('.grid-cell').filter(selectedPricesFilterQry);
    else
        filteredResults  = $('.grid-cell');
    if(selectedAreasFilterQry != '') 
        filteredResults = $(filteredResults).filter(selectedAreasFilterQry);
    $(filteredResults).show();
}