過濾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

回答

相關問題