将jquery代码转换为filter list by复选框转换为普通JS

我有一个按数据属性元素过滤列表的代码(在这里找到),我需要从jquery转换为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>

我尝试使用foreach循环,但我不知道如何得到相同的结果

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 




  })

 })

怎么做?