根据选中的复选框显示来自数据库的结果

Question

我在复选框列表中首先显示类别。当我选中一个类别复选框时，它会在下一个复选框列表中显示相关的子类别。我得到了第一个选中复选框的结果，但是当我选中第二个复选框时，之前的结果丢失了。我需要一个解决方案来显示所有选中的复选框结果。

我想在第一个列表的复选框上显示子类别。 jQuery 只返回当前选中的复选框值，只是依赖于复选框列表。我需要一个解决方案来显示所有选中的复选框结果。控制器显示与获取类别和子类别相关的功能。 Blade 文件代码包含所有获取结果。请更正我的代码。

category = { category_id, name };
sub_category = { sub_category_id, category_id, sub_category_name };

public function getCategory() 
{
  $category_list = DB::select('select * from table_category');
  return view('insertbusiness',['category_list' => $category_list]);
}

public function getSubCategory(Request $request)
{
  $sub_category = DB::table("table_sub_category")
    ->where("category_id",$request->category)
    ->pluck("sub_category_name","sub_category_id");
  return response()->json($sub_category );
}

  <div class="col-sm-4">
    @foreach($category_list as $category)
      <div class="form-check form-check-inline">
        <input class="form-check-input category" type="checkbox" id="category" name="category[]" value="{{$category->category_id}}">
        <label class="form-check-label" for="category">{{$category->category}}</label>
      </div>
    @endforeach
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <label for="subcategory" class="">Sub-Category</label>
    <div class="sub_category" id="sub_category"></div>
  </div>

$(function () {
  $('.category').click(function() {
    if (this.checked) {
      var id = $(this).attr('value');
      if (id) {
        $.ajax({
          type:"GET",
          url: "{{url('getSubCategory')}}?category=" + id,
          success: function(res) {
            if (res) {
              $("#sub_category").empty();                
              $.each(res, function(key, value) {
                $("#sub_category").append('<input type="checkbox" value="' + key + '">' + value + '');
              });
            } else {
              $("sub_category").empty();
            }
          }
        });
      } else {
        $("#sub_category").empty();
        $("#category").empty();
      }  
    }    
  });
});

Answer 1

这可能有助于满足您的要求。必须更改以下内容以显示所有选中的类别复选框的子类别列表：

• 避免在 AJAX 响应中执行 sub_category empty()
• 添加唯一标识符类（例如：sub_category_of_*）以标识类别的 sub_category 列表
• 当取消选中已选中的类别时，删除 sub_category 列表

用下面的代码替换你的 JS 并尝试。

$(function () {
  $('.category').click(function() {
    var id = $(this).attr('value');
    if (this.checked) {
      if (id) {
        $.ajax({
          type:"GET",
          url: "{{url('getSubCategory')}}?category=" + id,
          success: function(res) {
            if (res) {
              $.each(res, function(key, value) {
                $("#sub_category").append('<input type="checkbox" value="' + key + '" class="sub_category_of_'+id+'">' + value + '');
              });
            } else {
              // Handle the error case here without removing an existing elements
            }
          }
        });
      } else {
         // Handle the error case here
      }
    }
    else
    {
      // Remove the unchecked category checkbox if available
      if (id && $('.sub_category_of_'+id).length) {
        $('.sub_category_of_'+id).remove();
      }
    }
  });
});