Can someone help how to display a specific form if a checkbox is checked (all this happen without submitting the form beforehand) in laravel?

So, here is how it work so far

@extends('layouts.main') 

@section('title', __('landingPage.create'))

@section('additional_css')
<link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet">
@endsection

@section('script')'
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[type="checkbox"]').click(function(){
                if($(this).prop("checked") == true){
                    alert("you checked checkbox.");
                }else if($(this).prop("checked") == false){
                    alert("you unchecked checkbox.");
                }
            });
        });
    </script>
@endsection

@section('content')
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{ __('landingPage.tagline') }}</h3>  
                    </div>
                    
                    <!-- Header Card -->
                    <div class="card-body">
                        <div>
                            <form action="{{ route('landingPage.store') }}" enctype="multipart/form-data" method="post">
                                @csrf
                                <div class="form-group">
                                    <label>{{ __('landingPage.title') }}</label>
                                    <input type="text" name="title" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('landingPage.shortDesc') }}</label>
                                    <input type="text" name="short_description" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('landingPage.images') }}:</label>
                                    <input type="file" name="image" class="form-control" required> 
                                </div>
                                <div class="form-group">
                                    <input type="checkbox" name="is_have_button" class="switch-input" value="1"/>
                                    <label>{{ __('landingPage.haveButton') }}</label>
                                </div>

                                <div class="form-group">
                                    <label>{{ __('landingPage.buttonTag') }}</label>
                                    <input type="text" name="button_attribute[tag]" class="form-control" value="{{ old('button_attribute[tag]') }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ __('landingPage.buttonLink') }}</label>
                                    <input type="text" name="button_attribute[href]" class="form-control" value="{{ old('button_attribute[href]') }}">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary mr-3" style='float:left;'>{{ __('landingPage.store') }}</button>
                                </div>
                               
                            </form>

                            <div>
                                <a href="{{ route('landingPage.slider') }}"><button class="btn btn-danger mb-4" style='float:left;'>{{ __('landingPage.cancel') }}</button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

So in that code, I wanted that the form text for button_attribute can only displayed or at least can only be filled if the checkbox is checked (This should happen without pressing the submit button). My first idea is just to change the if function of the script from displaying alert to display the form, but it still always giving me error. So can anyone help? Thanks in advance

>Solution :

In your Question you are asking for specific form but in your HTML code there is only one form and there is only on check box, if multiple form than there must be separate checkbox for each form. It is not clear what actually you want.

However, to hide form use following code:

@section('script')'
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[type="checkbox"]').click(function(){
                if($(this).prop("checked") == true){
                         $("form").show();
                    alert("you checked checkbox.");
                }else if($(this).prop("checked") == false){
                          $("form").hide();
                    alert("you unchecked checkbox.");
                }
            });
        });
    </script>
@endsection