JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" class="brand" id="Gazelle" />
<input type="checkbox" class="brand" id="Batavus" />
<input type="checkbox" class="brand" id="Trek" />
<input type="checkbox" class="brand" id="KogaMiyata" />
<li class="merk" id="m_Gazelle" style="display:block;">
Gazelle
</li>
<li class="merk" id="m_Batavus" style="display:block;">
Batavus
</li>
<li class="merk" id="m_Trek" style="display:block;">
Trek
</li>
<li class="merk" id="m_KogaMiyata" style="display:block;">
KogaMiyata
</li>
JavaScript
$('.brand').on('change',function() {
$checked = $('.brand:checked'); //perform selection only once
if ($checked.length){ //checks if there are checked elements at all
$('.merk').hide(); //hide all
$checked.each(function(){
$('li#m_' + $(this).attr('id') + '').show(); //show only the items with corresponding checkboxes
});
} else { //no checked elements
$('.merk').show(); //show all
}
});