Фильтр объетов JS по checkbox

Рейтинг: 0Ответов: 1Опубликовано: 16.02.2023

Хочу сделать себе подсказку рецептов коктейлей по ингредиентам которые есть в наличии, помогите написать код фильтра на js. Логика такая загрузилась страница показываются все рецепты, выбираю Tequila мне показывает рецепт только дайкири, выбираю 2 чек Liquor мне показывает дайкири и маргариту, выбираю 3 чек Gin мне к выводу добавился джин-тоник.

<form id="form">
    <div>
        <p>Алкоголь</p>
        <input id="alc1" type="checkbox" name="Tequila">
        <label for="alc1">Текила</label> <br>
        <input id="alc2" type="checkbox" name="Gin">
        <label for="alc2">Джин</label> <br>
        <input id="alc3" type="checkbox" name="Liquor">
        <label for="alc3">Ликер</label> <br>
        <input id="alc4" type="checkbox" name="Vermouth">
        <label for="alc4">Вермут</label> <br>
    </div>
</form>
<br>
<div>
    <div class="cocktail_block">
        <div class="cocktail" id="negroni">Негрони</div>
        <div class="cocktail" id="margarita">Маргарита</div>
        <div class="cocktail" id="daikiri">Дайкири</div>
        <div class="cocktail" id="gin-tonic">Джин-тоник</div>
    </div>
</div>

const recipes  = [{
    Name: "Негрони",
    Ingr: ("Gin" + "Vermouth")
},
{
    Name: "Джин-тоник",
    Ingr: ("Gin")
},
{
    Name: "Маргарита",
    Ingr: ("Tequila" + "Liquor")
},
{
    Name: "Дайкири",
    Ingr: ("Tequila")
}
]
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

выбираю Tequila мне показывает рецепт только дайкири, выбираю 2 чек Liquor мне показывает дайкири и маргариту, выбираю 3 чек Gin мне к выводу добавился джин-тоник

Предложу такой вариант... Но с ИД там не так все просто.

const recipes = [{
    Name: "Негрони",
    Ingr: ["Gin", "Vermouth"]
  },
  {
    Name: "Джин-тоник",
    Ingr: ["Gin"]
  },
  {
    Name: "Маргарита",
    Ingr: ["Tequila", "Liquor"]
  },
  {
    Name: "Дайкири",
    Ingr: ["Tequila"]
  }
]

const of = document.querySelector('#form')
of.addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'INPUT') return
  const ob = document.querySelector('.cocktail_block')
  ob.innerHTML = ''
  const a = [...of.querySelectorAll(':checked')].map(o => o.name)
  const res = recipes.filter(({Ingr}) => Ingr.every(v => a.includes(v)))
  res.forEach(o => {
    const v = `<div class="cocktail">${o.Name}</div>`
    ob.insertAdjacentHTML('beforeend', v)
  })
})
<form id="form">
  <div>
    <p>Алкоголь</p>
    <input id="alc1" type="checkbox" name="Tequila">
    <label for="alc1">Текила</label> <br>
    <input id="alc2" type="checkbox" name="Gin">
    <label for="alc2">Джин</label> <br>
    <input id="alc3" type="checkbox" name="Liquor">
    <label for="alc3">Ликер</label> <br>
    <input id="alc4" type="checkbox" name="Vermouth">
    <label for="alc4">Вермут</label> <br>
  </div>
</form>
<br>
<div>
  <div class="cocktail_block">
  </div>
</div>