将 Jquery 代码通过复选框过滤列表转换为 Vanilla JS

Question

i have a code(found here) that filter a list by data-attribute element, and i need convert from jquery to js

 $('.checkbox').change(function() { $('li.list').each(function(i, item) { var color = $(this).data('color'); var visible = $('input.checkbox[data-color="' + color + '"]:checked').length > 0; visible ? $(this).show() : $(this).hide(); }); if ($('input.checkbox:checked').length === 0) { $('li.list').show(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="checkbox" data-color="blue"> Blue <input type="checkbox" class="checkbox" data-color="green"> Green <input type="checkbox" class="checkbox" data-color="red"> Red <ul> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="green">Green</li> <li class="list" data-color="red">Red</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="green">Green</li> </ul>

I tried to use a forEach loop but i don't know how to get the same result

const checkbox = document.querySelectorAll(".checkbox");
const list = document.querySelectorAll(".list");


 checkbox.forEach((item)=> {
  item.addEventListener('change', () => {

    var color = item.getAttribute('data-color');

    //Do another loop on list 




  })

 })

how to do that?

Answer 1

One option is to construct a standalone function that checks the :checked checkboxes for the colors to show, then iterates through the .list s and sets the display style appropriately. For every checkbox, add a change listener pointing to that function:

 const checkbox = document.querySelectorAll(".checkbox"); const list = document.querySelectorAll(".list"); const examineList = () => { const checkedColors = [...document.querySelectorAll('.checkbox:checked')] .filter(input => input.checked) .map(input => input.dataset.color); const showColor = checkedColors.length ? color => checkedColors.includes(color) : color => true; // if no colors are selected, always show every <li> document.querySelectorAll('.list').forEach((li) => { li.style.display = showColor(li.dataset.color) ? 'list-item' : 'none'; }); }; checkbox.forEach((item) => { item.addEventListener('change', examineList); });

 <label><input type="checkbox" class="checkbox" data-color="blue"> Blue</label> <label><input type="checkbox" class="checkbox" data-color="green"> Green</label> <label><input type="checkbox" class="checkbox" data-color="red"> Red</label> <ul> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="green">Green</li> <li class="list" data-color="red">Red</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="green">Green</li> </ul>

Answer 2

I'd like to present a little more concise version of the accepted answer.

I've added labels and a wrapping element around the checkboxes that serves as an anchor point to apply delegate listening to (so only listener needed in this code).

 colorfilter.addEventListener('change', (e) => { let selectedColors = [...colorfilter.querySelectorAll(':checked')].map(x => x.dataset.color); for (const listItem of document.querySelectorAll('.list')) { listItem.classList[selectedColors.includes(listItem.dataset.color) ? 'add' : 'remove']('show'); } })

 .list { display: none; } .show { display: list-item; }

 <div id="colorfilter"> <label><input type="checkbox" class="checkbox" data-color="blue"> Blue</label> <label><input type="checkbox" class="checkbox" data-color="green"> Green</label> <label><input type="checkbox" class="checkbox" data-color="red"> Red</label> </div> <ul> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="green">Green</li> <li class="list" data-color="red">Red</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="blue">Blue</li> <li class="list" data-color="green">Green</li> </ul>