当我在下面的代码中在jQuery中输入内容时，如何过滤复选框？

Question

我想在下面的代码中过滤我的复选框。当我使用“ js-filter-input”类编写输入时，我只想显示具有“ js-filter-input”输入值的复选框。例如我在输入中写入uni 1，我只想显示具有unni 1值的复选框，其他ckeckbox变成hide。但是我的代码无法正常工作。

 $( document ).on( 'keyup', '.js-filter-input', function () { var val; var $content =$( this ).parent().next().find( ".search-filter-con" ).find( '.label-name' ).text() + " "; if ( val = $( this ).val() ) { $( '.group-checkbox .label-name', $content ).each( function () { var patt = new RegExp( val, 'i' ); if ( patt.test( $( this ).data( 'en' ) ) || patt.test( $( this ).data( 'fa' ) ) || patt.test( $( this ).data( 'search' ) ) ) { $( this ).parent().show(); } else { $( this ).parent().hide(); } } ); } else { $( '.group-checkbox', $content ).show(); } } ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search-container2"> <input class="search_box js-filter-input" placeholder="" name="" type="text"> <button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button> </div> <div class="searchList"> <div class="sampleContainer mCustomScrollbar _mCS_3 mCS-dir-rtl mCS_no_scrollbar"> <div class="mCustomScrollBox mCS-light-thin mCSB_vertical mCSB_inside"> <div class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" dir="rtl"> <div class="search-filter-con"> <div class="group-checkbox"> <div class="squaredFour"> <input type="checkbox" value="None" id="uni1" name="check" /> <label for="uni1"></label> </div> <label class="label-name" for="uni1" data-fa="uni1" data-en="uni1" data-search="uni1>uni1</label> </div> <div class="group-checkbox"> <div class="squaredFour"> <input type="checkbox" value="None" id="uni2" name="check" /> <label for="uni2"></label> </div> <label class="label-name" for="uni2" data-fa="uni2" data-en="uni2" data-search="uni2">uni2</label> </div> </div> </div> </div> </div> </div> 

Answer 1

在您的示例中.. .search-filter-con元素具有两个标签名，而不仅仅是一个..因此代码将返回它们两个。. $(this).parent().next().find(".search-filter-con").find('.label-name').text()

要获取分隔的文本，您需要使用.each()遍历标签

$(this).parent().next().find(".search-filter-con").find('.label-name').each(function(){
   console.log($(this).text() + ',');
});

^{我不知道使用$(this).parent().next()的目的是什么，除非您有多个具有相同类的输入和div，并且要引用它们中的每一个}

要使用input进行过滤，可以将.filter()与indexOf()

 $(document).on('input', '.js-filter-input', function() { var val = $(this).val().trim(); if (val !== '') { $(this).parent().next().find(".group-checkbox").hide().find('.label-name').filter(function(){ var FaData = $(this).data('fa'); var EnData = $(this).data('en'); return FaData.indexOf(val) > -1 || EnData.indexOf(val) > -1; }).closest('.group-checkbox').show(); }else{ $('.group-checkbox').show(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="search-container2"> <input class="search_box js-filter-input" placeholder="" name="" type="text"> <button value="" class="search_submit" name="search_submit" type="submit"><i class="fa fa-search"></i></button> </div> <div class="searchList"> <div class="sampleContainer mCustomScrollbar _mCS_3 mCS-dir-rtl mCS_no_scrollbar"> <div class="mCustomScrollBox mCS-light-thin mCSB_vertical mCSB_inside"> <div class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" dir="rtl"> <div class="search-filter-con"> <div class="group-checkbox"> <div class="squaredFour"> <input type="checkbox" value="None" id="uni1" name="check" /> <label for="uni1"></label> </div> <label class="label-name" for="uni1" data-fa="امير كبير" data-en="امير كبير" data-search="uni1">امير كبير</label> </div> <div class="group-checkbox"> <div class="squaredFour"> <input type="checkbox" value="None" id="uni2" name="check" /> <label for="uni2"></label> </div> <label class="label-name" for="uni2" data-fa="تهران" data-en="تهران" data-search="uni2">تهران</label> </div> </div> </div> </div> </div> </div>