Флажок категории и подкатегории с использованием javascript и CSS

Посмотрите на этот вопрос, который я задал, он может вам помочь (я ответил сам): Как обновить переменную foreach в Blade Laravel с помощью js

Редактировать :

Часть ответа, которая может помочь вам решить проблему, вам нужно загрузить все категории и подкатегории, а затем поиграть с JS и CSS, чтобы показать, что вы хотите:

Код блейда

@foreach($filatov as $d)
    <div class = "col-md-6 folder" id = "test{{$d['id_folder']}}" style = "display: none">
        <div class = "card mt-1">
            <div class = "card-content py-50 px-1 folder-info">
                <div class = "d-flex justify-content-between align-items-center mb-1">
                    <span><i class = "feather icon-file-text font-medium-5"></i></span>
                </div>
                <div class = "row align-items-center">
                    <div class = "col-md-10">
                        <h6 class = "font-medium-2 mb-0">{{$d['fname']}}</h6>
                    </div>
                    <div class = "col-md-2">
                        <button value = "{{$d['id_file']}}" type = "button" class = "download btn btn-sm btn-icon btn-success waves-effect waves-light"><i class = "feather icon-download"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

JS-код:

$(".getfolder").click(function(e){
   var id = $(this).val();
   var target = '.folder';
   $(target + '#test' + id).css('display', 'block');
   $(target).not('#test' + id).css('display', 'none');
}); 

. благодаря @therealwalim Я нашел решение:

<!-- ####################### Blade ######################3 -->

    <div class = "content cat-content">
         <span class = "pull-left"><i class = "fa fa-chevron-down"></i></span><p>مجموعه 
      ها </p><hr>   

         @foreach($categories as $item)
         @if ($item->subcategories->count() > 0)

         <p><label><input  class = "category cat{{$item->id}}" type = "checkbox" 
         name = "category[]" value = "{{$item->id}}"  > {{$item->title}}</label></p>
          
         <div  id = "subcat{{$item->id}}"  class = "subcategory moveright"  
         style = "display: none">
              @foreach($item->subcategories as $submenu)
            <p><label><input class = "sub{{$item->id}}" type = "checkbox" name = "submenu[]" 
         value = "{{$submenu->id}}" > {{$submenu->title}}</label></p>
            @endforeach
         </div>
           
         @else
              
                <p><label><input class = "category" type = "checkbox" name = "category[]" value = "{{$item->id}}"  > {{$item->title}}</label></p>
                

         @endif
         @endforeach
        
    </div>

просто напечатайте все категории и их подкатегории

<!-- ####################### Script ######################3 -->

<script>

$(".category").click(function(e){
    var id = $(this).val();
    var target = '.subcategory';
   
    if ($('input.cat'+ id).is(':checked')) {
        $(target + '#subcat' + id).css('display', 'block');
    }else
    {
         $(target + '#subcat' + id).css('display', 'none');
         $('.sub' + id).prop('checked', false)
    }

});
</script>