How can I enable the functionality of marking tasks in the lightning web Component?

In the context of Salesforce, you can execute the functionality of marking tasks as completed by using a checkbox field named “Is_completed _ _c” in a lightning web Component (LWC) by using the steps which are given below:-

Retrieving of the task data

You can use Apex to retrieve the task data from the Database of Salesforce.

Displaying checkbox in LWC

You can use the “lightning-input” Component in your ALWC HTML file to create a checkbox input field.

Bind checkbox value

You can use two-way data binding for binding the checkbox value to the “ais_completed_ _ c” field of each task record retrieved from the apex.

Update task records

You can use apex for updating the task records in the platform of the Salesforce database with the new value of the “is_ completed_ _c” field.

Here is the example given :-

Task list.html

TaskList.js

Import { LightningElement, wire } from ‘lwc’;

Import getTasks from ‘@salesforce/apex/TaskController.getTasks’;

Import updateTask from ‘@salesforce/apex/TaskController.updateTask’;

Export default class TaskList extends LightningElement {

    Tasks;

    @wire(getTasks)

    wiredTasks({ error, data }) {

        if (data) {

            this.tasks = data;

        } else if (error) {

            // Handle error

        }

    }

    handleCheckboxChange(event) {

        const taskId = event.target.dataset.id;

        const isChecked = event.target.checked;

        const updatedTask = this.tasks.find(task => task.Id === taskId);

        updatedTask.Is_Completed__c = isChecked;

        updateTask({ task: updatedTask })

            .then(result => {

                // Handle success

            })

            .catch(error => {

                // Handle error

            });

    }

}