如何实现将textbox取值对应显示为checkbox的选中状态

核心逻辑就是做值标准化处理+遍历匹配，避开大小写、输入空格导致的匹配误差，具体实现步骤如下：

• 第一步：提取并标准化文本框的值
  拿到textbox的输入内容后，先按英文逗号做分割，对分割后的每一段内容去掉首尾空格、统一转为小写，存入Set结构方便快速查找，避免大小写、输入空格导致的匹配失败（比如示例里文本框的Banana和选项的banana大小写不一致的问题）。
  参考代码（原生JavaScript）：

  // 获取文本框输入值
  const textBoxContent = document.getElementById('fruitText').value;
  // 处理为标准化的选中值集合
  const checkedFruitSet = new Set(
    textBoxContent.split(',').map(item => item.trim().toLowerCase())
  );
  

• 第二步：遍历checkbox组匹配选中状态
  拿到所有checkbox选项，对每个选项的取值（可以是绑定的value属性，也可以是对应展示的文本）做和上面一致的标准化处理，判断值是否存在于刚才的选中集合中：存在就把checkbox的checked属性设为true（选中），不存在就设为false（未选中）。
  参考代码：

  // 遍历所有水果选项checkbox
  document.querySelectorAll('.fruit-checkbox').forEach(checkbox => {
    const currentOptionVal = checkbox.value.trim().toLowerCase();
    // 匹配集合值设置选中状态
    checkbox.checked = checkedFruitSet.has(currentOptionVal);
  });
  

• 可选：实时联动效果
  如果需要文本框输入内容变化时checkbox状态自动同步，只要给textbox绑定input事件，把上面两步的逻辑放到事件回调里执行即可，不需要额外触发操作。

效果验证：当文本框值为orange,mango, Banana时，处理后的选中集合为{"orange", "mango", "banana"}，对应orange、mango、banana三个checkbox会被设为选中，Apple选项不在集合内保持未选中，完全匹配需求场景。

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