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

Elhamb

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

$( 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>

穆罕默德·优素福

在您的示例中.. .search-filter-con元素具有两个label-name,而不仅仅是一个..因此代码将返回它们两个.. $(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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当我们在复选框上打勾时,如何添加表字段值并将其显示在输入中?

当我在Android中取消选择甚至1个复选框时,如何取消选择全选复选框

在输入字段中输入内容时如何过滤列表?

如果在输入中插入内容,则必须使用复选框

jQuery中未选中复选框时,我试图从输入字段中删除必填项

复选框以在jQuery中过滤结果

请在下面的javascript代码中解释我

在PHP中单击复选框时,如何禁用输入?

在jQuery中追加输入复选框

如何减少jQuery中复选框列表的代码大小?

复选框将所有已完成的输入字段复制到下面的字段中

在下面的代码中需要如何使用applyMap的帮助

如何在下面的代码中更改文本的颜色?

如何在下面的代码中实现改组函数?

如何在下面的代码中单击特定的href

在下面的代码中 row_string = " " 是如何工作的?

如何在下面的代码中打印正确的名称?

Python find() 函数在下面的代码中是如何工作的?

我应该如何在下面的代码中使用 C 中的结构指针数组?

如何在下面的代码中为我的 ajax 调用添加 10 秒的延迟

根据输入内容选中/取消选中复选框

在下拉列表中单击复选框时,该复选框保持选中状态

当我在下面的代码中将AlarmManager设置为Im做错时,立即触发警报

WPF如何在后面的代码中设置Gridview绑定中的复选框

我在下面的文本框中输入文本后,如何将Webapge下载为.html / .png是我的代码

当我使用jQuery单击“选择”按钮时,如何选择所有复选框

如何在选择两个复选框时禁用一组复选框的jquery函数中消除重复代码?

如何在用户在文本输入中输入内容时过滤DIV

当我运行代码时,我所有的复选框都被选中。我该如何停止?