надеюсь, это решит вашу проблему.работает отлично.удалите свой js-код и включите его.
(function ($) {
$(document).ready(function() {
$('.multifilter-gallery-button').click(function(){
var value = $(this).data('filter');
if(value == 'all'){
$('.multifilter-gallery-button').removeClass('active');
$('.multifilter-gallery-button input[type="checkbox"]').prop('checked', false);
$(this).addClass('active');
$('.multifilter-gallery-box').show();
$('.size-name').html('Size : '+'All');
$('.color-name').html('Color : '+'All');
$('.shape-name').html('Shape : '+'All');
}else{
$('.multifilter-gallery-button[data-filter="all"]').removeClass('active');
$('.multifilter-gallery-box').hide();
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('input[type="checkbox"]').prop('checked', false);
}else{
$(this).addClass('active');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
var colors = $('.multifilter-gallery-button.color.active');
var sizes = $('.multifilter-gallery-button.size.active');
var shapes = $('.multifilter-gallery-button.shape.active');
var colorsArray = $.map( colors, function( val, i ) {
return $(val).data('filter');
});
var sizesArray = $.map( sizes, function( val, i ) {
return $(val).data('filter');
});
var shapesArray = $.map( shapes, function( val, i ) {
return $(val).data('filter');
});
var combinations = [];
if(colorsArray.length > 0){
var colorsTexts = $.map( colors, function( val, i ) {
return $(val).text();
});
$('.color-name').html('Color : '+colorsTexts.join(', '));
combinations = colorsArray;
}else{
$('.color-name').html('Color : '+'No color selected');
}
if(sizesArray.length > 0){
var sizesTexts = $.map( sizes, function( val, i ) {
return $(val).text();
});
$('.size-name').html('Size : '+sizesTexts.join(', '));
if(combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
$.each($(sizesArray), function(ii, sz){
var combination = [c, sz];
combinations.push(combination);
});
});
}else{
combinations = sizesArray;
}
}else{
$('.size-name').html('Size : '+'No size selected');
}
if(shapesArray.length > 0){
var shapesTexts = $.map( shapes, function( val, i ) {
return $(val).text();
});
$('.shape-name').html('Shape : '+shapesTexts.join(', '));
if(combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
if($.isArray(c)){
$.each($(shapesArray), function(ii, s){
var combination = $.merge([s], c);
combinations.push(combination);
});
}else{
$.each($(shapesArray), function(ii, s){
var combination = [c, s];
combinations.push(combination);
});
}
});
}else{
combinations = shapesArray;
}
}else{
$('.shape-name').html('Shape : '+'No shapes selected');
}
//show boxes
if(combinations.length > 0){
$.each($(combinations), function(i, val){
if($.isArray(val)){
var classes = val.join('.');
$('.multifilter-gallery-box'+'.'+classes).show();
}else{
$('.multifilter-gallery-box'+'.'+val).show();
}
});
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
})
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Color</a>
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button color" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
<li class="multifilter-gallery-button color" data-filter="green">
<input type="checkbox" value="on">
green
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-display="static">Size</a>
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button size" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button size" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-display="static">shape</a>
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button shape" data-filter="square">
<input type="checkbox">
square
</li>
<li class="multifilter-gallery-button shape" data-filter="round">
<input type="checkbox">
round
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<p class="shape-name"> shape: (here will show the selected shape name)</p>
<p class="color-name"> color: (here will show the selected color name)</p>
<p class="size-name"> Size: (here will show the selected Size name)</p>
<div class="row mt-5">
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class="bg-danger m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">Red Small square</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class="bg-success m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">green medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class="bg-danger m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">Red medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class="bg-success m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>