Javascript 将Jquery代码转换为按复选框筛选列表为JS

我有一个按数据属性元素过滤列表的代码（在这里找到），我需要将jquery转换为js

$（'.checkbox'）.change（函数（）{
$（'li.list'）。每个（函数（i，项）{
var color=$（this.data（'color'）；
var visible=$（'input.checkbox[data color=“'+color+']：checked'）。长度>0；
可见？$（this.show（）：$（this.hide（）；
});
if（$（'input.checkbox:checked'）。长度==0）{
$（'li.list'）.show（）；
}
});

蓝色
绿色
红色

蓝色
蓝色
绿色
红色
蓝色
蓝色
绿色
一个选项是构造一个独立的函数，用于检查
：选中的
复选框中要显示的颜色，然后遍历
.list
并适当设置
显示样式。对于每个复选框，添加指向该函数的更改侦听器：


const checkbox=document.querySelectorAll（“.checkbox”）；
const list=document.queryselectoral（“.list”）；
常量考官=（）=>{
const checkedColors=[…document.querySelectorAll（'.checkbox:checked'）]
.filter（输入=>input.checked）
.map（输入=>input.dataset.color）；
const showColor=checkedColors.length
？颜色=>选中颜色。包括（颜色）
：color=>true；//如果未选择颜色，则始终显示每个

document.queryselectoral（'.list'）.forEach（（li）=>{
li.style.display=showColor（li.dataset.color）“‘列表项’：‘无’；
});
};
复选框.forEach（（项目）=>{
项目。添加的审核人（“变更”，审核人）；
});
蓝色
绿色
红色

蓝色
蓝色
绿色
红色
蓝色
蓝色
绿色
我想给出一个更简洁的答案

我已经在复选框周围添加了标签和包装元素，作为应用委托侦听的锚点（因此在代码中只需要侦听器）


colorfilter.addEventListener（'change'，（e）=>{
让selectedColors=[…colorfilter.querySelectorAll（':checked'）].map（x=>x.dataset.color）；
for（document.querySelectorAll（'.list'）的const listItem）{
listItem.classList[selectedColors.includes（listItem.dataset.color）
“添加”
：“删除”]（“显示”）；
}
})
.list{
显示：无；
}
.表演{
显示：列表项；
}

蓝色
绿色
红色

蓝色
蓝色
绿色
红色
蓝色
蓝色
绿色