How to delete all selected checkboxes in livewire and javascript, i already have a code for selecting all checkboxes in javascript, the problem is creating the delete logic of it in livewire then integrate to the front end so i can successfully delete all selected items:
my code:
<table class="table" width="100%">
<thead>
<tr>
<th><input type="checkbox" name="checkall" id="checkall" onClick="selects()" /> Select All</th>
<th><a href="" >Delete All</a></th>
<th>Section Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@forelse($sectionsdata as $section)
<tr>
<td><input value="{{ $section->id }}" name="user" type="checkbox"></td>
<td>{{ $section->section_name }}</td>
<td>{{ $section->section_status === 1 ? 'Enabled' : 'Disabled' }}</td>
<td>
<div class="btn-group">
<a href="#editSection" data-toggle="modal" wire:click.prevent="editSection({{ $section->id }})" class="btn btn-info"><i class="fa fa-edit"></i></a>
<a href="#" wire:click.prevent="ConfirmDelete({{$section->id}}, '{{$section->section_name}}')" class="btn btn-danger"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
@include('sections.edit')
empty
@endforelse
</tbody>
</table>
<script type="text/javascript">
function selects() {
var selectAllCheckbox = document.getElementById('checkall');
var checkboxes = document.getElementsByName('user');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes.checked = selectAllCheckbox.checked;
}
}
</script>
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Section as SectionModel;
class Section extends Component
{
public $addMore = [1];
public $count = 0;
public $section_name, $section_status, $edit_id;
public $sections = [['section_name' => '', 'section_status' => false]];
public $section_id;
public function AddMore() {
if (count($this->sections) < 5) {
$this->sections[] = ['section_name' => '', 'section_status' => false];
}
}
public function Remove($index) {
$this->count--;
unset($this->addMore[$index]);
}
public function toggleStatus($index) {
$this->sections[$index]['section_status'] = !$this->sections[$index]['section_status'];
}
public function store() {
foreach($this->sections as $key => $sectionData) {
SectionModel::create([
'section_name' => $sectionData['section_name'],
'section_status' => $sectionData['section_status'] ? 1 : 0,
]);
}
// Clear the sections array after storing the data
$this->FormReset();
$this->SwalMessageDialog('Section Inserted Sucessfully');
}
public function editSection($section_id) {
$this->edit_id = $section_id;
$section = SectionModel::findOrFail($section_id);
$this->section_name = $section->section_name;
$this->section_status = $section->section_status == 1;
}
public function update() {
SectionModel::updateOrCreate(
['id' => $this->edit_id],
[
'section_name' => $this->section_name,
'section_status' => $this->section_status ? 1 : 0,
]);
$this->FormReset();
$this->SwalMessageDialogupdate('Section Updated Sucessfully');
}
public function ConfirmDelete($section_id, $section_name) {
$this->dispatch('SwaleletedRecord', [
'section_name' => $section_name,
'title' => 'Are You Sure You Want to Delete? <span class="text-danger">' . $section_name . '</span>',
'id' => $section_id,
]);
}
protected $listeners = ['RecordDeleted'];
public function RecordDeleted($section_id) {
$sectiondelete = SectionModel::find($section_id);
$sectiondelete->delete();
}
public function DeletedSection() {
}
public function SwalMessageDialogupdate($message) {
$this->dispatch('MSGSuccessfullupdate', [
'title' => $message,
]);
}
public function FormReset() {
$this->sections = [['section_name' => '', 'section_status' => false]];
$this->dispatch('closeModel');
}
public function SwalMessageDialog($message) {
$this->dispatch('MSGSuccessfull', [
'title' => $message,
]);
}
public function render()
{
$sectionsdata = SectionModel::all();
return view('livewire.section', compact('sectionsdata'));
}
}
my code:
<table class="table" width="100%">
<thead>
<tr>
<th><input type="checkbox" name="checkall" id="checkall" onClick="selects()" /> Select All</th>
<th><a href="" >Delete All</a></th>
<th>Section Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@forelse($sectionsdata as $section)
<tr>
<td><input value="{{ $section->id }}" name="user" type="checkbox"></td>
<td>{{ $section->section_name }}</td>
<td>{{ $section->section_status === 1 ? 'Enabled' : 'Disabled' }}</td>
<td>
<div class="btn-group">
<a href="#editSection" data-toggle="modal" wire:click.prevent="editSection({{ $section->id }})" class="btn btn-info"><i class="fa fa-edit"></i></a>
<a href="#" wire:click.prevent="ConfirmDelete({{$section->id}}, '{{$section->section_name}}')" class="btn btn-danger"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
@include('sections.edit')
empty
@endforelse
</tbody>
</table>
<script type="text/javascript">
function selects() {
var selectAllCheckbox = document.getElementById('checkall');
var checkboxes = document.getElementsByName('user');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes.checked = selectAllCheckbox.checked;
}
}
</script>
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Section as SectionModel;
class Section extends Component
{
public $addMore = [1];
public $count = 0;
public $section_name, $section_status, $edit_id;
public $sections = [['section_name' => '', 'section_status' => false]];
public $section_id;
public function AddMore() {
if (count($this->sections) < 5) {
$this->sections[] = ['section_name' => '', 'section_status' => false];
}
}
public function Remove($index) {
$this->count--;
unset($this->addMore[$index]);
}
public function toggleStatus($index) {
$this->sections[$index]['section_status'] = !$this->sections[$index]['section_status'];
}
public function store() {
foreach($this->sections as $key => $sectionData) {
SectionModel::create([
'section_name' => $sectionData['section_name'],
'section_status' => $sectionData['section_status'] ? 1 : 0,
]);
}
// Clear the sections array after storing the data
$this->FormReset();
$this->SwalMessageDialog('Section Inserted Sucessfully');
}
public function editSection($section_id) {
$this->edit_id = $section_id;
$section = SectionModel::findOrFail($section_id);
$this->section_name = $section->section_name;
$this->section_status = $section->section_status == 1;
}
public function update() {
SectionModel::updateOrCreate(
['id' => $this->edit_id],
[
'section_name' => $this->section_name,
'section_status' => $this->section_status ? 1 : 0,
]);
$this->FormReset();
$this->SwalMessageDialogupdate('Section Updated Sucessfully');
}
public function ConfirmDelete($section_id, $section_name) {
$this->dispatch('SwaleletedRecord', [
'section_name' => $section_name,
'title' => 'Are You Sure You Want to Delete? <span class="text-danger">' . $section_name . '</span>',
'id' => $section_id,
]);
}
protected $listeners = ['RecordDeleted'];
public function RecordDeleted($section_id) {
$sectiondelete = SectionModel::find($section_id);
$sectiondelete->delete();
}
public function DeletedSection() {
}
public function SwalMessageDialogupdate($message) {
$this->dispatch('MSGSuccessfullupdate', [
'title' => $message,
]);
}
public function FormReset() {
$this->sections = [['section_name' => '', 'section_status' => false]];
$this->dispatch('closeModel');
}
public function SwalMessageDialog($message) {
$this->dispatch('MSGSuccessfull', [
'title' => $message,
]);
}
public function render()
{
$sectionsdata = SectionModel::all();
return view('livewire.section', compact('sectionsdata'));
}
}