<input filter='woman' class='filter' type="checkbox" id="woman" name="woman">
<label for="woman">Девушки</label>
<input class='filter' filter='men' type="checkbox" id="men" name="men">
<label for="men">Мужчины</label>
<input class='filter' filter='young' type="checkbox" id="young" name="young">
<label for="young">Молодые</label>
<input class='filter' type="checkbox" filter='adult' id="adult" name="adult">
<label for="adult">Взрослые</label>
<input class='filter' filter='money' type="checkbox" id="money" name="money">
<label for="money">С деньгами</label>
   Имя на букву
<select class='filter' name="names" id="names">
<option selected="selected" value="any">Любую</option>
<option value="S">S</option>
<option value="N">N</option>
<option value="E">E</option>
<option value="I">I</option>
<option value="V">V</option>
</select>
<pre>
<div style='width:80%' id='result'></div>
</pre>
items = [
{
name: "Pasha (Son Of The Millionaire)",
sex: "men",
age: 16,
money: 100000000
},
{
name: "Kolya",
sex: "men",
age: 16,
money: 0
},
{
name: "Vasya",
sex: "men",
age: 50,
money: 1000
},
{
name: "Sara",
sex: "woman",
age: 15,
money: 1
},
{
name: "Serge",
sex: "men",
age: 32,
money: 601
},
{
name: "Natasha",
sex: "woman",
age: 50,
money: 10000
},
{
name: "Nina",
sex: "woman",
age: 25,
money: 400
},
{
name: "Sasha",
sex: "woman",
age: 20,
money: 340
},
{
name: "Ivan",
sex: "men",
age: 45,
money: 352
},
{
name: "Elena",
sex: "woman",
age: 29,
money: 300
}
];
let allFilters = {
money: (i) => i.money > 600,
woman: (i) => i.sex === "woman",
men: (i) => i.sex === "men",
young: (i) => i.age < 30,
adult: (i) => i.age > 30,
names: (i) => $("#names").val() === "any" || i.name[0] === $("#names").val()
};
function applyFilters(filtersArray) {
$("#result").html(
JSON.stringify(
items.filter((i) =>
filtersArray.every((filter) => allFilters[filter](i))
),
null,
"\t"
)
);
}
$("body").on("change", ".filter", function () {
let filters = ["names"];
$("input:checked").each(function () {
filters.push($(this).attr("filter"));
});
applyFilters(filters);
});
applyFilters(["names"]);
This Pen doesn't use any external CSS resources.