如何编写JS函数根据指定选中值数组隐藏不符合条件的item类div

存在的问题 #

你原有代码的错误主要集中在这几点：

• 变量命名冲突：循环内的参数名和外层的items、values重名，作用域混乱导致取值错误
• 遍历逻辑错误：forEach方法没有返回值，无法给条件判断提供布尔结果；同时已经拿到单条checkbox元素cb，不需要再加索引[i]取值，cb[i]会返回undefined
• 数组方法使用错误：Array.every()要求所有元素都满足条件才返回true，不符合你「只要有一个匹配就显示」的需求；且你只取第一个勾选元素[0]的逻辑，自然只能识别第一个选中的checkbox

修复后的实现代码 #

HTML结构（保持你原有结构不变） #

<div class='item'>
  <input type='checkbox' value='green' checked>
  <input type='checkbox' value='red'>
</div>
<div class='item'>
  <input type='checkbox' value='yellow'>
  <input type='checkbox' value='orange'>
</div>

JS逻辑 #

function MyFunction () {
  const targetValues = ['green', 'red'];
  const items = document.querySelectorAll('.item');

  items.forEach(item => {
    // 提取当前item下所有已勾选的checkbox的value
    const checkedList = Array.from(item.querySelectorAll('input[type="checkbox"]:checked'));
    const checkedValues = checkedList.map(checkbox => checkbox.value);
    // 判断是否有任意一个已勾选值在目标数组中
    const hasMatch = checkedValues.some(val => targetValues.includes(val));
    // 控制显隐
    item.style.display = hasMatch ? 'block' : 'none';
  })
}

如果你后续需求调整为「必须勾选所有目标值才显示」，只需要把代码里的some改成every即可。

内容的提问来源于stack exchange，提问作者user17143939