display result from database based on checked checkbox

Question

I am displaying category in first in a check box list. When I check a category checkbox it displays related sub categories in the next check box list. I get a result for the first checked checkbox but when I check on the second checkbox the previous result is lost. I need a solution to display all checked checkbox results.

I want display sub category on check checkbox of first list. jQuery returns only the current checked checkbox value just dependent checkbox list. I need a solution to display all checked checkbox results. The controller shows a function related to getting category and subcategory. The Blade file code contains all fetching result. Please correct my code.

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

This might be helpful to achieve your requirements. The below things has to be changed to display all the checked category checkbox's subcategory list:

• Avoid to do the sub_category empty() in AJAX response
• Add the unique identifier class (ex: sub_category_of_*) to identify the category's sub_category list
• Remove the sub_category list when the uncheck happen to the already checked category

Replace your JS with below code and try.

 $(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(); } } }); });