JSFiddle - React, Tailwind, and code Playground

HTML

<label><input type="checkbox" value="flour">Мука</label>
<label><input type="checkbox" value="sugar">Сахар</label>
<label><input type="checkbox" value="1kg">1кг</label>
<label><input type="checkbox" value="5kg">5кг</label>

<div class="item" data-type="flour 1kg">Flour 1kg</div>
<div class="item" data-type="sugar 5kg">Sugar 5kg</div>
<div class="item" data-type="flour 5kg">Flour 5kg</div>
<div class="item" data-type="sugar 1kg">Sugar 1kg</div>
<div class="item" data-type="sugar 1kg">Sugar 1kg</div>
<div class="item" data-type="sugar 5kg">Sugar 5kg</div>

JavaScript

var $filterCheckboxes = $('input[type="checkbox"]');
var $item = $(".item");

$filterCheckboxes.on("change", function() {
	var selectedFilters = {};
	$filterCheckboxes.filter(":checked").each(function() {
		if (!selectedFilters.hasOwnProperty(this.name)) {
			selectedFilters[this.name] = [];
		}

		selectedFilters[this.name].push(this.value);
	});

	var $filteredResults = $item;
	$.each(selectedFilters, function(name, filterValues) {
		$filteredResults = $filteredResults.filter(function() {
			var matched = false, currentFilterValues = $(this).data("type").split(" ");

			$.each(currentFilterValues, function(_, currentFilterValue) {
				if ($.inArray(currentFilterValue, filterValues) != -1) {
					matched = true;
					return false;
				}
			});

			return matched;
		});
	});

	$item.hide().filter($filteredResults).show();
});