如何根据搜索框输入内容获取对应checkbox的值并展示在指定div中

你的代码核心问题出在each遍历逻辑中，直接对整个.filter-label元素集合调用text()方法，该方法会把所有匹配元素的文本拼接后返回，所以才会出现多个品牌名拼接的异常内容，导致条件判断失效。同时你还缺少自动勾选checkbox、匹配失败清空状态、输入值大小写统一的逻辑。

$('.search-brand').on('input', function(){
  // 统一转小写处理，避免大小写不匹配
  const searchVal = $(this).val().trim().toLocaleLowerCase();
  const brandFilterEl = $(".filter-item .filter-label");

  // 每次搜索前清空之前的状态，避免残留旧数据
  $('.brand-id, .brand-name').text('');
  $('input[name="brandIds"]').prop('checked', false);

  brandFilterEl.each(function(){
    // 只取当前遍历到的单个品牌标签的文本
    const curBrandText = $(this).text().trim().toLocaleLowerCase();
    if(searchVal === curBrandText){
      // 获取对应checkbox的value
      const brandId = $(this).siblings('input[name="brandIds"]').val();
      // 填充展示内容，保留原文本大小写
      $('.brand-id').text(brandId);
      $('.brand-name').text($(this).text());
      // 自动勾选对应checkbox
      $(this).siblings('input[name="brandIds"]').prop('checked', true);
      // 匹配到目标后终止循环，减少不必要的遍历
      return false;
    }
  })
});

• 替换事件绑定为input事件，比keyup+keypress更适配输入框内容变化场景，不会重复触发
• 遍历内用$(this)获取当前单个品牌标签元素，避免取全量拼接的错误文本
• 统一将搜索值和品牌文本都转小写对比，解决大小写不匹配问题
• 增加搜索前清空历史状态的逻辑，避免匹配不到时残留旧数据
• 补充匹配成功后自动勾选对应checkbox的逻辑
• 匹配到目标后直接终止循环，减少不必要的性能消耗

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