Implement deletion of checked values in a Visualforce page

Here's a simplified example to illustrate the approach:

Visualforce Page

<apex:page controller="MyController">
    <script>
        function deleteSelectedRecords() {
            var selectedIds = [];
            // Loop through checkboxes and collect IDs of checked records
            document.querySelectorAll('input[type="checkbox"]:checked').forEach(function(checkbox) {
                selectedIds.push(checkbox.value);
            });
            // Call server-side method to delete selected records
            MyController.deleteRecords(selectedIds, function(result, event) {
                // Handle response from server
                if (event.status) {
                    alert(result); // Display success message
                    // Refresh page or update data table
                } else {
                    alert('Error: ' + event.message); // Display error message
                }
            });
        }
    </script>
    
    <!-- Display records in a table with checkboxes -->
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <!-- Add more columns as needed -->
            </tr>
        </thead>
        <tbody>
            <apex:repeat value="{!records}" var="record">
                <tr>
                    <td><input type="checkbox" value="{!record.Id}" /></td>
                    <td>{!record.Name}</td>
                    <!-- Add more columns as needed -->
                </tr>
            </apex:repeat>
        </tbody>
    </table>
    
    <!-- Button to delete selected records -->
    <button onclick="deleteSelectedRecords()">Delete Selected</button>

</apex:page>

Controller

public class MyController {
    @RemoteAction
    public static String deleteRecords(List<String> recordIds) {
        try {
            // Delete selected records
            List< Account > recordsToDelete = [SELECT Id FROM Account WHERE Id IN :recordIds];
            delete recordsToDelete;
            return 'Selected records deleted successfully.';
        } catch (Exception e) {
            return 'Error deleting records: ' + e.getMessage();
        }
    }

}