jquery通过输入框过滤复选框列表

Question

我有一个很长的复选框列表(具有相同的名称)。我想创建一个基于文本框中输入的过滤系统。我的意思是，当我在文本框中写入“ter”时，我只想显示那些值与 %ter% 匹配的复选框(意味着在任何地方都有短语“ter”)。使用 jquery 实现这一目标的最佳方法是什么？我很抱歉，因为我对 jquery 很陌生。

<input type="checkbox" name="chk" id="chk1" value="casual">casual
<input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate
<input type="checkbox" name="chk" id="chk3" value="hunter">hunter
<input type="checkbox" name="chk" id="chk4" value="forest">forest
<input type="checkbox" name="chk" id="chk5" value="term">extreme
<input type="checkbox" name="chk" id="chk6" value="river">river
<input type="checkbox" name="chk" id="chk7" value="beach">beach
<input type="text" id="chkfilter">

因此，每当我在文本框中写入“ter”时，复选框 2,3 和 5 应该可见，其他复选框应该隐藏/消失。怎么做？对每个单独的项目使用 div 吗？另外，如何使用jquery搜索来匹配%ter%

Answer 1

当您在文本框中输入内容时，检查复选框以查看字符串是否存在于带有indexOf的值中，并根据该值设置显示属性(我使用了 block ，但内联对于复选框来说可能是正确的):

$('#chkfilter').on('keyup', function() {
    var query = this.value;

    $('[id^="chk"]').each(function(i, elem) {
          if (elem.value.indexOf(query) != -1) {
              elem.style.display = 'block';
          }else{
              elem.style.display = 'none';
          }
    });
});

复选框后面的文本不是复选框的一部分，也不会被隐藏，为此，您可能应该将其包装在标签中并执行类似 JSBIN 的操作??