使用 javascript 和 CSS 的复选框类别和子类别答案

【问题标题】：Checkbox Category and Subcategories using javascript and CSS使用 javascript 和 CSS 的复选框类别和子类别
【发布时间】：2021-03-23 13:34:33
【问题描述】：

我有一个类别和子类别（在类别下）的列表，就像图片一样我想要的是当客户点击每个类别复选框时，它会显示其子类别

【问题讨论】：

您好，添加相关代码，以便其他人可以看到您目前的尝试并能够帮助您

标签： javascript jquery css laravel

【解决方案1】：

看看我问的这个问题，可能对你有帮助（我自己回答的）：How to update variable on a foreach in blade laravel with 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');
});

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
好的，我将编辑我的答案以提供正确的信息！
非常感谢@therealwalim，它非常有用

【解决方案2】：

。感谢@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>

【讨论】：