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 
$(":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 に答える
2

valuejQueryの「Attribute Contains Selector」を使用してフィルタリングし、チェックボックスを非表示または無効にすることができます。ラベルについて - これを行うには多くの方法があります。全体を div にラップ.parent()し、フィルタリングされたチェックボックスで使用して全体を非表示にするか、ラベルテキストを<label>対応する id でラップして後で非表示にします。

jQuery API Docs: jQuery API - Attribute Contains Selector をご覧ください。

于 2013-01-05T17:34:05.797 に答える