Filter by checkbox - ecmascript-6

Question

I have a checkbox. And its name is filterAll. I want it to be active. All
array is displayed. And when the checkbox is disabled. All array hide.
I want to use the filter for this operation. But my code does not work.
I have two checkboxes. I want when any of the checkboxes is active. Just check the information for that checkbox.
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

If you want to control the showing/hiding of elements with checkboxes, here's a simplified example:
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>