Question

我有一个很长的复选框列表（同名）。我想根据文本框中的输入创建一个过滤系统。我的意思是，当我在我的文本框中写“ter”时，我想只显示那些值匹配％tr％的chechbox（意味着在任何地方都有短语“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的值中，并根据该值设置显示属性（我使用了块，但内联对于复选框可能是正确的）：

$('#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 ??

Answer 2

您可以使用jQuery“Attribute Contains Selector”按value进行过滤，然后隐藏或禁用复选框。关于标签 - 有很多方法可以做到这一点。将整个事物包装成div并在过滤的复选框上使用.parent()来隐藏整个事物，或者将标签文本包装到具有相应id的<label>中以便以后隐藏它。

查看jQuery API文档：jQUery API - Attribute Contains Selector

Answer 3

$(":checkbox").each(function () {
    $(this).add(this.nextSibling)
        .add(this.nextSibling.nextSibling)
        .wrapAll("<label class='country'></label>")
})
$("#text").keyup(function () {
    var re = new RegExp($(this).val(), "i")
    $('.country').each(function () {
        var text = $(this).text(),
            matches = !! text.match(re);
        $(this).toggle(matches)
    })
})

我使用此解决方案使用文本框值

来过滤复选框名称

按输入框的jquery过滤复选框列表

3 个答案: