7

我有一个很长的复选框列表（同名）。我想根据文本框中的输入创建一个过滤系统。我的意思是，当我在文本框中写“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%

4

3 回答 3

12

当您在文本框中键入内容时，请检查复选框以查看字符串是否存在于 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的操作？

于 2013-01-05T17:28:00.690 回答
2

您可以value使用 jQuery“属性包含选择器”进行过滤，然后隐藏或禁用复选框。关于标签 - 有很多方法可以做到这一点。将整个内容包装到 div 中并.parent()在过滤后的复选框上使用以隐藏整个内容，或者将标签文本包装到<label>具有相应 id 的 a 中以在之后隐藏它。

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

于 2013-01-05T17:34:05.797 回答
2 
$(":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)
    })
})

我使用此解决方案使用文本框值过滤复选框名称

于 2015-11-06T12:14:09.257 回答