Laravel Multiple Checkbox with Delete Rows Example

Laravel 8

Nicesnippets

196

28-04-2021


Laravel Multiple Checkbox with Delete Rows Example

laravel multiple checkbox to delete value

Hi guys,

To day i will explaind to the how to delete multiple checkbox in laravel 8 and other version so you are just following into the my steps in step by step and learn to the laravel 8 multiple checkbox to delete value.

So let's start to the example and follow to the my all step.

Step 1: Create laravel 8 project


First step to create a fresh laravel 8 project in using bellow command.

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

Step 2: Configuration your database

This step to configure your database details in .env file.So let's create username, password etc. So let's add.

.env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Create a product table

You need to require a product table for the store in your value and product table field to require in name and details field.so create a product table in just following command.

php artisan make:migration create_product_table

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('product', function (Blueprint $table) {

$table->id();

$table->string('name');

$table->string('details');

$table->timestamps();

});

}

/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::dropIfExists('product');

}

}

Then next to run your migration in following command.

php artisan migrate

Step 4: create a product model

Next you can require to the product model so create a product model in just following command through.

php artisan make:model Product

App\Models\Product.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $table = 'product';

protected $fillable = ['name', 'details'];

}

Step 5: create a product Controller

Next you can require to the product Controller so create a product Controller in just following command through.

php artisan make:Controller ProductController

app/Http/Controllers/ProductController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Product;

class ProductController extends Controller

{

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function index()

{

$products = Product::get();

return view('products',compact('products'));

}

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function destroy($id)

{

Product::delete($id);

return response()->json(['success'=>"Product Deleted successfully.", 'tr'=>'tr_'.$id]);

}

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function deleteAll(Request $request)

{

$ids = $request->ids;

Product::whereIn('id',explode(",",$ids))->delete();

return response()->json(['success'=>"Products Deleted successfully."]);

}

}

Step 6: Create new Routes

routes/web.php

use App\Http\Controllers\ProductController;

Route::get('myproducts', [ProductController::class, 'index']);

Route::delete('myproducts/{id}', [ProductController::class, 'destroy']);

Route::delete('myproductsDeleteAll', [ProductController::class, 'deleteAll']);

Step 7: Add Blade File

resources/views/products.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 - Multiple delete records with checkbox example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">

</head>

<body>

<div class="container">

<h3>Laravel 8 - Multiple delete records with checkbox example</h3>

<button style="margin-bottom: 10px" class="btn btn-primary delete_all" data-url="{{ url('myproductsDeleteAll') }}">Delete All Selected</button>

<table class="table table-bordered">

<tr>

<th width="50px"><input type="checkbox" id="master"></th>

<th width="80px">No</th>

<th>Product Name</th>

<th>Product Details</th>

<th width="100px">Action</th>

</tr>

@if($products->count())

@foreach($products as $key => $product)

<tr id="tr_{{$product->id}}">

<td><input type="checkbox" class="sub_chk" data-id="{{$product->id}}"></td>

<td>{{ ++$key }}</td>

<td>{{ $product->name }}</td>

<td>{{ $product->details }}</td>

<td>

<a href="{{ url('myproducts',$product->id) }}" class="btn btn-danger btn-sm"

data-tr="tr_{{$product->id}}"

data-toggle="confirmation"

data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-remove"

data-btn-ok-class="btn btn-sm btn-danger"

data-btn-cancel-label="Cancel"

data-btn-cancel-icon="fa fa-chevron-circle-left"

data-btn-cancel-class="btn btn-sm btn-default"

data-title="Are you sure you want to delete ?"

data-placement="left" data-singleton="true">

Delete

</a>

</td>

</tr>

@endforeach

@endif

</table>

</div>

</body>

<script type="text/javascript">

$(document).ready(function () {

$('#master').on('click', function(e) {

if($(this).is(':checked',true))

{

$(".sub_chk").prop('checked', true);

} else {

$(".sub_chk").prop('checked',false);

}

});

$('.delete_all').on('click', function(e) {

var allVals = [];

$(".sub_chk:checked").each(function() {

allVals.push($(this).attr('data-id'));

});

if(allVals.length <=0)

{

alert("Please select row.");

} else {

var check = confirm("Are you sure you want to delete this row?");

if(check == true){

var join_selected_values = allVals.join(",");

$.ajax({

url: $(this).data('url'),

type: 'DELETE',

headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

data: 'ids='+join_selected_values,

success: function (data) {

if (data['success']) {

$(".sub_chk:checked").each(function() {

$(this).parents("tr").remove();

});

alert(data['success']);

} else if (data['error']) {

alert(data['error']);

} else {

alert('Whoops Something went wrong!!');

}

},

error: function (data) {

alert(data.responseText);

}

});

$.each(allVals, function( index, value ) {

$('table tr').filter("[data-row-id='" + value + "']").remove();

});

}

}

});

$('[data-toggle=confirmation]').confirmation({

rootSelector: '[data-toggle=confirmation]',

onConfirm: function (event, element) {

element.trigger('confirm');

}

});

$(document).on('confirm', function (e) {

var ele = e.target;

e.preventDefault();

$.ajax({

url: ele.href,

type: 'DELETE',

headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

success: function (data) {

if (data['success']) {

$("#" + data['tr']).slideUp("slow");

alert(data['success']);

} else if (data['error']) {

alert(data['error']);

} else {

alert('Whoops Something went wrong!!');

}

},

error: function (data) {

alert(data.responseText);

}

});

return false;

});

});

</script>

</html>

So, finally we are done with our code we can get below output.

Run your project in following command:

php artisan serve

Browser url run : http://localhost:8000/myproducts