Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mozew's avatar
Level 6

How to display checkboxes where select option = category_id

I have categories table.

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->text('description');
        $table->integer('parent_id')->default(0);
        $table->timestamps();
    });
}

And I have computers table.

public function up()
{
    Schema::create('computers', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->bigInteger('category_id')->unsigned();
        $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
        $table->string('name');
        $table->string('latin');
        $table->timestamps();
    });
}

ComputerController.php

public function index ()
{
    $computers = Computer::all();
    $categories = Category::where('parent_id', '=', 4)->get();
    return view('Home.computers', compact('categories', 'computers'));
}

computers.blade.php

<form action="{{ route('computers.store') }}" method="post">
    {{ csrf_field() }}
    <div class="form-group">
        <select id="select" name="category_id" class="form-control">
            @foreach($categories as $category)
                <option data-description="{{ $category->description }}" value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <p id="description"></p>
    </div>
    <div class="form-group laptop_repair box">
        <p></p>
        @foreach ($computers->where('category_id', 2) as $computer)
            <input type="checkbox" id="{{ $computer->latin }}">
            <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
        @endforeach
    </div>
    <div class="form-group install_windows box">
        <p></p>
        @foreach ($computers->where('category_id', 3) as $computer)
            <input type="checkbox" id="{{ $computer->latin }}">
            <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
        @endforeach
    </div>
    <div class="form-group backup box">
        <p></p>
        @foreach ($computers->where('category_id', 4) as $computer)
            <input type="checkbox" id="{{ $computer->latin }}">
            <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
        @endforeach
    </div>
    <div class="form-group">
        <button class="btn btn-primary">Save</button>
    </div>
</form>

I tried show checkboxes when I click and select a option but it did not display.

And But I did the following but did not show.

0 likes
14 replies
mozew's avatar
Level 6

script.js

$(document).ready(function() {
    $("select").change(function() {
        var color = $(this).val();
        if (color == "laptop_repair") {
            $(".box").not(".laptop_repair").hide();
            $(".laptop_repair").show();
        } else if (color == "install_windows") {
            $(".box").not(".install_windows").hide();
            $(".install_windows").show();
        } else if (color == "backup") {
            $(".box").not(".backup").hide();
            $(".backup").show();
        } else if (color == "antivirus") {
            $(".box").not(".antivirus").hide();
            $(".antivirus").show();
        } else if (color == "magenta") {
            $(".box").not(".magenta").hide();
            $(".magenta").show();
        } else {
            $(".box").hide();
        }
    });
});
mozew's avatar
Level 6

I tried change this code, but it did not work.

script.js

<script>
    jQuery(document).ready(function () {
        jQuery('#select').change(function (event) {
            event.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        jQuery.ajax({
            url: "{{ url('/parent_id') }}",
            method: 'post',
            data: {
                select: jQuery('#select').val(),
            },
            success: function (result) {
                console.log(result);
            },
        })
    })
</script>

web.php

Route::post('/parent_id', 'ComputerController@parent_id');

ComputerController.php

public function parent_id(Request $request)
{
    $parent_id = Category::where('parent_id', $request->input('select'));
    return $parent_id;
}
Tray2's avatar

I think this is what you are trying to achive. Done in plain javascript (don't like or know jQuery).

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>

    <select name="test" id="select_test" onchange="displayBoxes()">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </table>

  <div id="value1">
    <label>Option 1</label>
    <input type="checkbox" name="" value="">
  </div>
  <div class="hidden" id="value2">
    <label>Option 2</label>
    <input type="checkbox" name="" value="">
  </div>
  <div class="hidden" id="value3">
    <label>Option 3</label>
    <input type="checkbox" name="" value="">
  </div>
   

  <script>
    function displayBoxes() {
      let option = document.querySelector('#select_test');
      let boxes = document.querySelectorAll('div');
      boxes.forEach(function(el) {
        el.classList.add('hidden');
      });

      document.querySelector('#value' + option.options[option.selectedIndex].value).classList.remove('hidden');
    }
  </script>
</body>
</html>
1 like
mozew's avatar
Level 6

Yes , I tried for show the checkboxes , after I select a option.

And I want the same thing. But with Laravel and the database

Tray2's avatar

The code I wrote is easy to adapt to laravel blade and database

Just loop through the options giving correct value {{ option->name }} or whatever you loop through just make sure you do the same thing with the divs for the checkboxes.

mozew's avatar
mozew
OP
Best Answer
Level 6

I changed this but my checkboxes for me did not display.

@extends('Home.master')

@section('content')

    <div id="computers" class="pt-5 pb-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-9 m-auto">
                    <div class="card mt-3">
                        <div class="card-header">
                            <h4>Computers</h4>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('computers.store') }}" method="post">
                                {{ csrf_field() }}
                                <div class="form-group">
                                    <select id="select" name="category_id" class="form-control">
                                        @foreach($categories as $category)
                                            <option data-description="{{ $category->description }}" value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <p id="description"></p>
                                </div>
                                <div class="form-group d-none box17">
                                    <p></p>
                                    @foreach ($computers->where('category_id', 2) as $computer)
                                        <input type="checkbox" id="{{ $computer->latin }}">
                                        <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
                                    @endforeach
                                </div>
                                <div class="form-group d-none box18">
                                    <p></p>
                                    @foreach ($computers->where('category_id', 3) as $computer)
                                        <input type="checkbox" id="{{ $computer->latin }}">
                                        <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
                                    @endforeach
                                </div>
                                <div class="form-group d-none box19">
                                    <p></p>
                                    @foreach ($computers->where('category_id', 4) as $computer)
                                        <input type="checkbox" id="{{ $computer->latin }}">
                                        <label for="{{ $computer->latin }}">{{ $computer->name }}</label>
                                    @endforeach
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
    
@section('script')
    <script type="text/javascript" src="{{ asset('themes/js/script.js') }}"></script>
    <script>
        function displayBoxes() {
            let option = document.querySelector('#select');
            let boxes = document.querySelectorAll('div');
            boxes.forEach(function(el) {
                el.classList.add('hidden');
            });
            document.querySelector('.box' + option.options[option.selectedIndex].value).classList.remove('.d-none');
        }
    </script>
@endsection

And I have value in database.

show cateegories

Tray2's avatar

What does the console in your browser say?

jlrdw's avatar

@irankhosravi We went rounds with the same thing on a drop-down box it's the same technique if a zero is stored in the database it's not checked if a one is stored it is checked.

Why would it be any different from a select option.

mozew's avatar
Level 6

@JLRDW - Do not interfere.

I have a question.

Has your question upset you?

If yes, do not look at my post and do not open it.

mozew's avatar
Level 6

@TRAY2 - Thank you, But why when I choose one, I'll get the page of browser white page for me?

Please or to participate in this conversation.