Hello Devs,

In this tutorial, we are going to see example of multiselect dropdown with checkbox in laravel .

Follow this step by step guide given below:




Step 1 : 


Install Laravel 7/6

composer create-project --prefer-dist laravel/laravel blog

Database Configuration .env

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret



Step 2: 


Create frameworks Table and Model 

php artisan make:model Framework -m

database/migrations/2020_01_10_102325_create_frameworks_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateFrameworksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('frameworks', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('frameworks');
    }
}

Run this command:

php artisan migrate

app/Framework.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Framework extends Model
{
    protected $fillable = [
        'name'
    ];
}



Step 3: 


Create Route 

Route::get('frameworks','FrameworkController@index');
Route::post('frameworks','FrameworkController@store')->name('frameworks.store');


Step 4: 


Create Controller

php artisan make:controller FrameworkController

app/Http/Controllers/FrameworkController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Framework;

class FrameworkController extends Controller
{
    public function index()
    {
    	return view('framework');
    }

    public function store(Request $request)
    {
    	$input = $request->all();
    	$data = [];
    	$data['name'] = json_encode($input['name']);

    	Framework::create($data);
        return response()->json(['success'=>'Success Fully Insert Recoreds']);    	
    }
}



Step 5: 


Create Blade Files resources/views/framework.blade.php

<!DOCTYPE html>
<html>
 <head>
  <title>Multiselect Dropdown With Checkbox In Laravel - rathorji.in </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
   <meta name="csrf-token" content="{{ csrf_token() }}">
 </head>
 <body class="bg-info">
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Multiselect Dropdown With Checkbox In Laravel- rathorji.in</h2>
   <br /><br />
   <form method="post" id="framework_form">
    <div class="form-group">
     <label>Select which Framework you have knowledge</label>
     <select id="framework" name="name[]" multiple class="form-control" >
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Laravel">Laravel</option>
      <option value="YII">YII</option>
      <option value="Zend">Zend</option>
      <option value="Symfony">Symfony</option>
      <option value="Phalcon">Phalcon</option>
      <option value="Slim">Slim</option>
     </select>
    </div>
    <div class="form-group">
     <input type="submit" class="btn btn-info" name="submit" value="Submit" />
    </div>
   </form>
   <br />
  </div>
 </body>
<script>
$(document).ready(function(){
 $('#framework').multiselect({
  nonSelectedText: 'Select Framework',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });
 
 $('#framework_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
   $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });
  $.ajax({
   url:"{{ route('frameworks.store') }}",
   method:"POST",
   data:form_data,
   success:function(data)
   {
    $('#framework option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#framework').multiselect('refresh');
    alert(data['success']);
   }
  });
 });
});
</script>
</html>


Run this command:

php artisan serve

Open this URL:

http://localhost:8000/frameworks


I hope this example helps you.