Javascript 在动态复选框列表控件中搜索或筛选

const filterl=document.querySelector（“#filter”）；
const els=Array.from（document.querySelectorAll（'#mdi>span'）；
const labels=els.map（el=>el.textContent）；
常量处理程序=值=>{
常量匹配=labels.map（（label，idx，arr）=>label.toLowerCase（）.includes（value.toLowerCase（））？idx:null）。过滤器（el=>el！=null）；
els.forEach（（el，idx）=>{
if（匹配。包括（idx））{
els[idx].style.display='block'；
}否则{
els[idx].style.display='none'；
}
});
};
filterl.addEventListener（'keyup'，（）=>handler.call（null，filterl.value））；
const filterre2=document.querySelector（“#filter1”）；
const-elss=Array.from（document.queryselectoral（'#mdi>span'）；
const labels=elss.map（el=>el.textContent）；
常量handlerr=值=>{
常量匹配=labels.map（（label，idx，arr）=>label.toLowerCase（）.includes（value.toLowerCase（））？idx:null）。过滤器（el=>el！=null）；
elss.forEach（（el，idx）=>{
if（匹配。包括（idx））{
elss[idx].style.display='block'；
}否则{
elss[idx].style.display='none'；
}
});
};
filterre2.addEventListener（'keyup'，（）=>handler.call（null，filterre2.value））
span{
显示：块；
}
#计量吸入器{
边框：1px实心#ccc；
高度：100px；
溢出y：滚动；
宽度：250px；
背景：#ccc；
边界半径：5px；
填充物：5px；
}
#mdii{
边框：1px实心#ccc；
高度：100px；
溢出y：滚动；
宽度：250px；
背景：#ccc；
边界半径：5px；
填充物：5px；
}
过滤记录



儿童保育
咨询
感知
打架子鼓
弹吉他
弹钢琴
音响设备
引座


过滤记录



家用润肤露
梳子
贴纸
鼓
弹吉他
弹钢琴
音响设备
引座
如果我理解正确，您希望筛选复选框以仅显示与用户输入筛选器匹配的复选框。你可以通过做下面的事情来实现这一点。我还删除了一些看起来不正确或不必要的HTML


const filterl=document.querySelector（“#filter”）；
const els=Array.from（document.querySelectorAll（'#mdi>span'）；
const labels=els.map（el=>el.textContent）；
常量处理程序=值=>{
常量匹配=labels.map（（label，idx，arr）=>label.toLowerCase（）.includes（value.toLowerCase（））？idx:null）。过滤器（el=>el！=null）；
els.forEach（（el，idx）=>{
if（匹配。包括（idx））{
els[idx].style.display='block'；
}否则{
els[idx].style.display='none'；
}
});
};
filterl.addEventListener（'keyup'，（）=>handler.call（null，filterl.value））
span{
显示：块；
}
过滤记录



儿童保育
咨询
感知
打架子鼓
弹吉他
弹钢琴
音响设备
引座
你必须把你的代码放在问题中。我刚才已经这样做了。如果你动态创建了这些复选框，这是否意味着你有JSON来生成它们？我要说的是：您可以将JSON转换为数组，并根据数组搜索删除html元素。是的，它是由来自db@Tom O的JSON字符串生成的。您提供的代码片段非常有用，但添加到我正在寻找的内容中，如果我有多个这样的div，每个div上面都有一个过滤器，那么我如何让它分别为每个div工作呢Hi伙计们，我想对上面的代码进行改进，这样每个复选框列表都会通过上面的过滤器记录输入字段使用相同的javascript基代码进行过滤，因此javascript代码将以对象的形式出现