Фильтр по флажку

Question

У меня есть флажок.И его зовут filterAll.Я хочу, чтобы он был активным.Весь массив отображается.И когда флажок отключен.Весь массив скрыть.Я хочу использовать фильтр для этой операции.Но мой код не работает.

У меня есть два флажка.Я хочу, когда какой-либо из флажков активен.Просто проверьте информацию для этого флажка.

let FlyList = [{

    "flkind": "systemi"
  }, {

    "flkind": "systemi"
  }, {

    "flkind": "systemi"
  },
  {

    "flkind": "charteri"

  }, {

    "flkind": "charteri"
  }, {

    "flkind": "charteri"
  },
];

let filter = FlyList.filter(item => {
  if (item.flkind === 'charteri') {
    item.style.display = 'block';
  } else {
    item.style.display = 'none';
  }
});

<input type="checkbox" name="FilterAll" id="FilterAll" class="individual"></input>
<input type="checkbox" name="checkFilter" id="checkFilter" class="individual"></input>
<input type="checkbox" name="checkFilter2" id="checkFilter2" class="individual"></input>
<div class="full-item">

  <div class="item-sort">

    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>systemi</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: grey">image</div>
      <div class="time" style="background: grey"><span>systemi</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: grey">image</div>
      <div class="time" style="background: grey"><span>systemi</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>charteri</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>charteri</span></div>
    </div>
    <div class="item">
      <div class="pic" style="background: teal">image</div>
      <div class="time" style="background: teal"><span>charteri</span></div>
    </div>


  </div>

</div>

Answer 1

Если вы хотите контролировать показ / скрытие элементов с помощью флажков, вот упрощенный пример:

const content = document.getElementById('content'),
  filters = document.getElementById('filters');

filters.addEventListener('change', function(e) {
  let cb = e.target;
  [...content.querySelectorAll(`.${cb.value}`)].forEach(el => 
    el.style.display = 
      cb.checked 
        ? 'block' 
        : ''
    )
})

.a,
.b {
  display: none;
}

<fieldset class="filter" id="filters">
  <legend>Filter</legend>
  <input type="checkbox" value="a" id="a" /><label for="a">a</label>
  <br />
  <input type="checkbox" value="b" id="b" /><label for="b">b</label>
</fieldset>

<div id="content">
  <div class="a">This will be visible if checkbox#a is checked</div>
  <div class="b">This will be visible if checkbox#b is checked</div>
</div>