</> Code The Pixel

This tutorial will show how to create a bulk delete function in CakePHP 4. The bulk delete is a process of selecting a group of records in a single table and removing it from the database. A checkbox will be rendered on each of the record IDs and sent to the function that manages the delete all process.

Create Checkbox
File Location: ...\templates\Users\index.php
A checkbox is used to capture the id of each selected record that need to be deleted. The checkbox is generated in the index page as shown below:

<table id="main_index" class="table table-hover text-nowrap">
<thead>
	<tr>
		<th><?= $this->Paginator->sort('#') ?></th>

		...other codes

	<?= $this->Form->create(null,['url'=>['action'=>'bulkDelete']]) ?>
	<?php foreach ($users as $user): ?>
	<tr>
		<td><?= $this->Form->checkbox('ids[]',['value'=>$user->id]) ?></td>
</table>
	<button class="button">Delete Selected</button>
	<?= $this->Form->end() ?>
	<?= $this->fetch('postLink'); ?>

Public Function bulk delete
File Location: ...\src\Controller\UsersController.php
Create the public function that handles the bulk delete process as shown below in your controller.
 

public function bulkDelete()
{
	$this->request->allowMethod(['post','delete']);
	$ids = $this->request->getData('ids');
	
	if($this->Users->bulkDelete(['Users.id IN'=>$ids])){
		$this->Flash->success(__('The selected user has been deleted.'));
	} else {
		$this->Flash->error(__('Please select user to delete'));
	}
		return $this->redirect(['action' => 'index']);
		//exit('test');
}

Now you should be able to select and delete the records.

If you want to have a main checkbox in your header that will select  all or deselect all the checkboxes with one single click, use this code in your header:

<th><?= $this->Form->checkbox('ids[]',['onchange'=>'checkAll(this)', 'name'=>'chk[]']) ?></th>

Then add the following script at the end of your code:

<script>
 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }
</script>

That all. Happy coding :)