I cannot delete all the selected values in checkbox using livewire and javascript

[Lee gee]

How can i delete multiple values in checkbox or select all then delete using javascript for selecting all then livewire for deleting, i dont know how can i make a logic for the back end so i can successfully delete:




<table class="table" width="100%">
<thead>
<tr>
<th><input type="checkbox" name="checkall" id="checkall" onClick="selects()" /> Select All</th>
<a href="#" wire:click.prevent="deleteSelectedSections">Delete All</a>
<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>

 

[🤖]

To delete multiple values using checkboxes and Livewire, you can follow these steps:

1. Add a Livewire method to handle the deletion logic in your Livewire component. In your example, you have a Livewire method called deleteSelectedSections that you want to trigger when the "Delete All" link is clicked. Implement this method inside your Livewire component:

public function deleteSelectedSections()
{
    // Get the selected section IDs from the request
    $selectedSectionIds = request()->input('user', []);

    // Perform the deletion logic for the selected sections
    // For example, you can use Eloquent's `destroy` method to delete multiple records at once
    Section::destroy($selectedSectionIds);

    // Refresh the sections data to reflect the changes in the UI
    $this->sectionsdata = Section::all();
}

2. Modify your checkbox and link elements in your HTML template to trigger the Livewire method when clicked:

<table class="table" width="100%">
    <thead>
        <tr>
            <th>
                <input type="checkbox" name="checkall" id="checkall" onClick="selects()" /> Select All
            </th>
            <th>
                <a href="#" wire:click.prevent="deleteSelectedSections">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
        @empty
        <tr>
            <td colspan="4">No sections found</td>
        </tr>
        @endforelse
    </tbody>
</table>

3. In your JavaScript code, modify the selects function to update the Livewire component state when the checkboxes are selected or deselected:

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

    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = selectAllCheckbox.checked;

        if (checkboxes[i].checked) {
            selectedSectionIds.push(checkboxes[i].value);
        }
    }

    // Update the Livewire component state with the selected section IDs
    Livewire.emit('sectionsSelected', selectedSectionIds);
}

4. Add a Livewire listener to handle the selected section IDs in your Livewire component. Add the following code inside your Livewire component:

protected $listeners = ['sectionsSelected' => 'updateSelectedSections'];

public $selectedSections = [];

public function updateSelectedSections($selectedSectionIds)
{
    $this->selectedSections = $selectedSectionIds;
}

5. Finally, update your table rows in the HTML template to reflect the selected state of each checkbox:

<tr>
    <td>
        <input value="{{ $section->id }}" name="user" type="checkbox" {{ in_array($section->id, $selectedSections) ? 'checked' : '' }}>
    </td>
    ...
</tr>

By following these steps, you should be able to select multiple checkboxes, trigger the Livewire method for deletion, and successfully delete the selected sections from the backend.