Javascript 从文本显示中删除未选中的项目&；将所选复选框推入按钮元素

我已设法在选中文本时显示文本。无论何时取消选中，文本似乎仍然保留，是否要删除它？此外，是否仍可以将选定的复选框推入按钮元素

const check=document.queryselectoral（'.accordion content li'）；
const checkBox=Array.from（检查）；
const filtersDisplay=document.querySelector（'.search menu.filter box'）；
复选框.forEach（函数（列表）{
list.addEventListener（'change'，function（））{
console.log（list.textContent）；
filtersDisplay.textContent=list.textContent；
})
})

搜索菜单
去


选定的过滤器将显示在此处


分类

项目1


项目2


项目3

您可以显示所选值，并使用

const check=document.queryselectoral（'.accordion content li'）；
const checkBox=Array.from（检查）；
const filtersDisplay=document.querySelector（'.search menu.filter box'）；
const defaultText=“此处将显示选定的过滤器”；
const selected=新集合（）；
函数显示值（设置）{
如果（set.size==0）filtersDisplay.textContent=defaultText；
否则{
filtersDisplay.innerHTML=“”；
const fragment=document.createDocumentFragment（）；
对于（让el离开集合）{
const btn=document.createElement（“按钮”）；
btn.textContent=（el）；
子片段（btn）；
}
filtersDisplay.appendChild（片段）；
}
}
复选框.forEach（函数（列表）{
list.addEventListener（'change'，函数（el）{
const text=list.textContent.trim（）；
如果（选中。有（文本））{
选中。删除（文本）
}选择其他选项。添加（文本）
显示值（选定）；
})
})

。过滤框{
背景色：#F5；
显示器：flex；
间隙：.5rem；
页边顶部：1rem；
填充：.5rem1rem；
边界半径：4px；
}
.过滤盒按钮{
背景色：黑色；
颜色：白色；
边界半径：24px；
边界：无；
}

搜索菜单
去


选定的过滤器将显示在此处


类别

项目1


项目2


项目3

将

事件

参数传递给

更改

事件的侦听器函数。

target.checked

属性将根据复选框状态返回true/false

checkBox.forEach(function(list) {
  list.addEventListener('change', function(e) {
    filtersDisplay.textContent = e.target.checked ? list.textContent : 'Selected filters will display here';
  })
})
``

---

创建一个数组并维护复选框列表。选中或取消选中时，从数组中删除元素。然后遍历数组和显示按钮

const check=document.queryselectoral（'.accordion content li'）；
const checkBox=Array.from（检查）；
const filtersDisplay=document.querySelector（'.search menu.filter box'）；
让checkedBox=[]；
const txt='选定的过滤器将显示在此处'
复选框.forEach（函数（列表）{
list.addEventListener（'change'，函数（e）{
如果（！checkedBox.includes（list.textContent.trim（）））{
checkedBox.push（list.textContent.trim（））；
}否则{
checkedBox=checkedBox.filter（item=>item！==list.textContent.trim（））
}
createButton（）
})
})
函数createButton（）{
document.getElementById（'filter-box'）。innerHTML=''；
如果（checkedBox.length！==0）{
document.getElementById（'filter-box'）。innerHTML=checkedBox.map（item=>`${item}`）。join（“”）
}否则{
document.getElementById（'filter-box'）。innerHTML=txt
}
}

搜索菜单
去


选定的过滤器将显示在此处


分类

项目1


项目2


项目3

如果选中了多个复选框，那么最好显示所有复选框

textContent

。不，它们应该分开。这样，用户就可以单击每个单独的按钮并将其取消选中。谢谢@decpk，看起来所有选中的项目都添加到了1个按钮中。有没有办法将选中的选中项拆分为每个选中项的单独按钮？请允许我找个时间…创建一个新问题，并显示您已尝试的内容。此外，输入上没有结束标记。@WeeklyButterfly34请查看