How to Delete Multiple Data using Checkbox in Laravel 10

Last Updated on by in Laravel

A checkbox is a handy GUI element. It allows users to select multiple options among given options in a list.

A checkbox is a profound UI component; you can use it to select or deselect action items. In this tutorial, you will find out how to remove multiple SQL records with a checkbox in Laravel using AJAX.

Data is laid in rows and columns format in a database. Every row contains information, and every piece of information reckon as data. The primary job of a developer is to add, update or remove data from the database.

Specific tools help communicate with the server. We will use AJAX to delete rows from the database using the checkbox in Laravel. Lets us throw some light on

AJAX stands for Asynchronous JavaScript And XML. It is a set of striking web development techniques that uses various web technologies on the client side to build asynchronous web applications.

It makes web developers’ lives less cumbersome by helping send and retrieve data from a server asynchronously without reloading the web page.

How to Delete SQL Data Rows with Checkbox using Ajax in Laravel 10

  • Step 1: Create Laravel Project
  • Step 2: Build Database Connection
  • Step 3: Generate New Model
  • Step 4: Rub Database Migration
  • Step 5: Create New Controller
  • Step 6: Build View File
  • Step 7: Set Up New Routes
  • Step 8: Run Laravel Server

Create Laravel Project

In the initial step, you must run the command to create a new Laravel application. You should install Composer and must have a code editor with a cli tool.

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

Use command to step inside the project.

cd laravel-demo

Build Database Connection

To connect laravel with the database; you require to add database details inside the .env config file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

For macOS MAMP server; ensure that you add UNIX_SOCKET and DB_SOCKET below database details in .env file.

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Generate New Model

A modal file holds the modal class; the modal class contains a set of data that is directly related to data points.

php artisan make:model Student -m

A new modal file has been created; furthermore, you have to move into the app/Models/ folder here; you will see the Student.php file; you have to add the given code there.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    use HasFactory;
    protected $fillable = [
        'subject',
        'details'
    ];    
}

Setting Up Migrations

In the previous step we generated a new model and added the new values to the model. This time we will send those values into the database table.

Head over to database/migrations/xxxx_create_students_table.php file and insert the given code into the file.

<?php

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

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

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

Go ahead and run the given command.

php artisan migrate

Create New Controller

The CLI tool utterly reduces the pain of creating imperative files. We can use the composer command to generate a new controller.

php artisan make:controller StudentController

You have to create the functions which will handle the records deletion in contrast to SQL database.

Open the app/Http/Controllers/StudentController.php and add the given code to the file.

<?php
namespace App\Http\Controllers;
use App\Models\Student;
use Illuminate\Http\Request;

class StudentController extends Controller
{
     
    public function index(Request $request)
    {
        $data['students'] = Student::get();
        return view('home', $data);
    }
 
    public function removeMulti(Request $request)
    {
        $ids = $request->ids;
        Student::whereIn('id',explode(",",$ids))->delete();
        return response()->json(['status'=>true,'message'=>"Student successfully removed."]);
         
    }
 
}

Build View File

To setup a view relative to the controller; you must create a home.blade.php file in resources/views directory.

Make sure to place the given code into the file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
      <title>Laravel Multi Checkboxes Example</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
      <meta name="csrf-token" content="{{ csrf_token() }}">
   </head>
   <body>
      <div class="container">
         @if ($message = Session::get('success'))
         <div class="alert alert-info">
            <p>{{ $message }}</p>
         </div>
         @endif

         <h2 class="mb-4">Laravel Checkbox Multiple Rows Delete Example</h2>
         <button class="btn btn-primary btn-xs removeAll mb-3">Remove All Data</button>
         <table class="table table-bordered">
            <tr>
               <th><input type="checkbox" id="checkboxesMain"></th>
               <th>Id</th>
               <th>Category Name</th>
               <th>Category Details</th>
            </tr>
            @if($students->count())
            @foreach($students as $key => $student)
            <tr id="tr_{{$student->id}}">
               <td><input type="checkbox" class="checkbox" data-id="{{$student->id}}"></td>
               <td>{{ ++$key }}</td>
               <td>{{ $student->name }}</td>
               <td>{{ $student->details }}</td>
            </tr>
            @endforeach
            @endif
         </table>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


   </body>

   <script type = "text/javascript" >
    $(document).ready(function() {
        $('#checkboxesMain').on('click', function(e) {
            if ($(this).is(':checked', true)) {
                $(".checkbox").prop('checked', true);
            } else {
                $(".checkbox").prop('checked', false);
            }
        });
        $('.checkbox').on('click', function() {
            if ($('.checkbox:checked').length == $('.checkbox').length) {
                $('#checkboxesMain').prop('checked', true);
            } else {
                $('#checkboxesMain').prop('checked', false);
            }
        });
        $('.removeAll').on('click', function(e) {
            var studentIdArr = [];
            $(".checkbox:checked").each(function() {
                studentIdArr.push($(this).attr('data-id'));
            });
            if (studentIdArr.length <= 0) {
                alert("Choose min one item to remove.");
            } else {
                if (confirm("Are you sure?")) {
                    var stuId = studentIdArr.join(",");
                    $.ajax({
                        url: "{{url('delete-all')}}",
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: 'ids=' + stuId,
                        success: function(data) {
                            if (data['status'] == true) {
                                $(".checkbox:checked").each(function() {
                                    $(this).parents("tr").remove();
                                });
                                alert(data['message']);
                            } else {
                                alert('Error occured.');
                            }
                        },
                        error: function(data) {
                            alert(data.responseText);
                        }
                    });
                }
            }
        });
    }); 
 </script>
</html>

Set Up New Routes

We need to create the route URLs; these links will invoke the request from the view file to the controller.

Hence, open the routes/web.php file and insert the given code into the file.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('students', [StudentController::class, 'index']);
Route::delete('delete-all', [StudentController::class, 'removeMulti']);

Run Laravel Server

In the last step, you have to run the laravel application. Running a laravel app is simple; all it takes is a single class that can fire up the laravel server.

php artisan serve

You can add this url to your browser’s address bar to test the app.

http://127.0.0.1:8000/students

How to Delete Multiple Data using Checkbox in Laravel

Conclusion

A checkbox is a graphical widget that enables the user to make a binary choice.

In this Laravel multiple data remove with checkbox example, you learned how to use AJAX to delete multiple records from the SQL database using the checkbox in Laravel application.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.