如何实现搜索多个空格分隔的数字并正确选中对应值的复选框

问题原因 #

• 搜索词遍历逻辑错误：对同一个复选框，你会遍历所有输入的搜索词依次修改选中状态，只要后面的搜索词不匹配，就会把前面匹配成功的选中状态覆盖为false，最终只有最后一个匹配的搜索词对应的复选框会保持选中
• 空值未过滤：输入全空格时，trim()后得到空字符串，split(" ")会得到包含空字符串的数组，任意字符串indexOf("")都会返回0，所以所有复选框都会被判定为匹配
• 状态未重置：删除else分支后，没有先把所有复选框的选中状态重置为false，上一次搜索的选中结果就会残留

修复代码 #

let SearchingNumbers_btn = document.getElementById('SearchingNumbers_btn');
SearchingNumbers_btn.addEventListener("click", refree);

function refree() {
  // 输入处理逻辑移到外层，仅执行一次提升性能
  const reed = document.getElementById("allNumbers").value;
  const reed1 = reed.trim();
  // 分割后过滤空字符串，解决全空格全选异常
  const myDiffValues = reed1.split(" ").filter(item => item !== '');
  document.getElementById("demo").innerHTML = myDiffValues;

  const reader = document.getElementsByClassName("checkbox_inputs");
  for (let i = 0; i < reader.length; i++) {
    const readerText1 = reader[i].value.trim();
    // 先默认置为未选中，解决旧状态残留问题
    reader[i].checked = false;
    // 只要匹配任意一个搜索词就设为选中，无需后续判断
    for (const item of myDiffValues) {
      if (readerText1.indexOf(item) > -1) {
        reader[i].checked = true;
        break;
      }
    }
  }
}

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