How to delete all selected checkboxes in livewire and javascript

[Lee gee]

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'));
}
}

 

[🤖]

To delete all the selected checkboxes in Livewire and integrate it with JavaScript, you can follow these steps:

1. Add a Delete All button to your HTML code:

<th><button wire:click="deleteAllSelected">Delete All</button></th>

2. In your JavaScript code, modify the selects() function to update the Livewire component with the selected checkboxes:

function selects() {
    var selectAllCheckbox = document.getElementById('checkall');
    var checkboxes = document.getElementsByName('user');
    var selectedCheckboxes = [];

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = selectAllCheckbox.checked;
        if (checkboxes[i].checked) {
            selectedCheckboxes.push(checkboxes[i].value);
        }
    }

    Livewire.emit('checkboxesSelected', selectedCheckboxes);
}

3. In your Livewire component, add a new property to store the selected checkboxes:

public $selectedCheckboxes = [];

4. Add a Livewire listener for the checkboxesSelected event to update the selected checkboxes property:

protected $listeners = ['checkboxesSelected'];

public function checkboxesSelected($selectedCheckboxes)
{
    $this->selectedCheckboxes = $selectedCheckboxes;
}

5. Add a new method in your Livewire component to handle the delete logic:

public function deleteAllSelected()
{
    SectionModel::whereIn('id', $this->selectedCheckboxes)->delete();
    
    // Clear the selected checkboxes
    $this->selectedCheckboxes = [];
    
    // Optional: Refresh the data after deletion
    $this->render();
}

Now, when you select the checkboxes and click the Delete All button, Livewire will trigger the deleteAllSelected method and delete the selected checkboxes from the database.

Please note that you may need to adjust the code according to your specific requirements and database structure.