过滤DOM元素复选框从文本输入jquery

-2

我正在一个项目中，我必须过滤名称或数据属性的基础上的一些复选框。例如，如果我在文本框中输入一些文本，那么我想隐藏所有，只显示那些不包含我已经输入到文本区域的子字符串的复选框。我的复选框正在动态创建。过滤DOM元素复选框从文本输入jquery

<div class="col-xs-6"> 
       <div class="form-group @if($errors->has('role_name')) {{'has-error'}} @endif col-xs-12"> 
       <label for="role_name" class="col-xs-5 control-label">@if($errors->has('role_name'))<i class="fa fa-times-circle-o"></i>@endif Role Name</label> 
       <div class="col-xs-7"> 
        <input class="form-control" id="role_name" value="{{old('role_name')}}" type="text" name="role_name"> 
        @if($errors->has('role_name')) 
        <span class="help-block">{{ $errors->first('role_name') }}</span> 
        @endif 
       </div> 
       </div> 
      </div> 

<?php $count = 0; ?> 
      @foreach($permissions as $key => $per) 
      <?php $count++; ?> 
       @if($count == 1) <div class="row"> @endif 
       <div class="col-xs-4"> 
       <div class="form-group @if($errors->has('permission_id')) {{'has-error'}} @endif col-xs-12"> 
        <div class="col-xs-12"> 
        <div class="checkbox"> 
         <label> 
         <input class="permission_id" type="checkbox" value="{{$per->permission_id}}" name="permission_id[]" data-text='{{$per->display_name}}'> {{$per->display_name}} 
         </label> 
        </div> 
        @if($errors->has('permission_id')) 
         <span class="help-block">{{ $errors->first('permission_id') }}</span> 
        @endif 
        </div> 
       </div> 
       </div> 
       @if($count == 3) </div> <hr class="row-divider" style="margin: 0px auto;" /> <?php $count = 0; ?> @endif 
      @endforeach

这是我的循环和文本框

我终于想使用jQuery做的div CSS做“显示：无;”使他们在if条件内disapear .. 我已经尝试使用数据和attr来获取和比较值..但我没有得到任何地方。我不知道我在做什么错。如果我简单地尝试在所有$（'input [type = checkbox]'）中进行读取，每个（）我只打印第一个元素n次。任何帮助

来源

2016-12-16 Syed Naeem

请不要在截图中张贴代码。它们不能被搜索或复制，并且可用性差。相反，将代码作为文本直接粘贴到您的问题中。如果选择它并单击'{}'按钮或Ctrl + K，则代码块将缩进四个空格，这将导致它被呈现为代码。 – Chris

appologies ...我的坏！我现在就编辑它 –

这是我所想出的解决方案。它工作尽可能我可以看到..但如果有任何失去目的，我不知道，我不处理异常，请让我知道。任何帮助总是受到关注。

$('#role_name').on('input',function(){ //when input is changing in the field 
    $('input.permission_id').each(function(){ //itetrate through all inputs with permission_id 
     //check all the check boxes that match the description 
     if($(this).data('text').toLowerCase().indexOf($('#role_name').val().toLowerCase()) >= 0) 
     $(this).parents().eq(3).show(); //show the match check boxes 
     else 
     $(this).parents().eq(3).hide(); //hide the un match boxes 
    }); 

    });

这是jQuery的机能的研究我已经comented一些HTML的div，从而获得所需的父母在HTML行，但我认为这是一个很好的解决方案。如果不请引导我

来源

2016-12-16 08:30:10

过滤DOM元素复选框从文本输入jquery

回答

相关问题