Select - Deselect checkbox in Lightning Web Component

 Agenda

In the previous blog, we are working with a single record and manipulating it as per the requirements,

but when we are working for the organization we need to think to cover larger aspects.

And while working with salesforce data we should be aware of the fact that we might need to work

with data in bulk. So, when we need to work with more than one record we use checkbox

functionality and use that checkbox to see which record we need to make changes to.

Blog Details

The blog gives us a brief that how we select and unselect all checkboxes from the header checkbox.

What we are going to do

In this blog, we use a table to show the records with the checkbox for each record and a

header checkbox to select - unselect all records.

Requirements:

• You need to have access to your org.   

• Should have installed the VS Code Installed in your system.   

• You should have some basic knowledge of Lightning Web Component.

• You must have some proper records in your org to show data on the table.

A Little About Lightning Web Component(LWC)

Lightning Web Components is open-source, empowering you to

explore the source code, customize the behavior for your needs,

and build enterprise-ready web components on any platform,

not just Salesforce.

Lightning Web Component or LWC are custom HTML elements built using HTML and modern JavaScript.

We Basically work on ES6(ECMAScript 2015)

LWC uses core Web Components standards and delivers exceptional performance.

HINT: We can use Data - Attribute functionality to get the value of the selected checkboxes.

HTML Syntax: 

1. Header Checkbox

<lightning-input type="checkbox" name="allSelect" 

    class="checked masterCheckbox" onchange={selectDeselectAll} >

</lightning-input>

2. Row Checkboxes

<lightning-input type="checkbox" name="isSelect" 

class="chkxBxs"></lightning-input>

"We use 'this.template.querySelectorAll()’ we use this method to look for the elements that our component rendered."

But there are some limitations to this method:

• The order of elements is not guaranteed.

• Elements not rendered to the DOM aren’t returned in the querySelector result.

• Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.

To display the Records with a related checkbox follow this HTML: 

Java Script: 

 

    

selectDeselectAll() method handles the record list checkboxes according to the headerCheckbox

click event. ‘this.template.querySelectorAll('.chkxBxs')’.

Method fetch all checkboxes which contains the class named “chkxBxs'”. And then,

We run the loop on the list of chkxBxs and select - deselect all as per the event.

We can get the values of the selected checkbox by using Data - Attributes and 

‘this.template.querySelectorAll('.chkxBxs')’ and fullfill our basic requirements.

Blog’s Conclusion:

So, the conclusion of the blog is that now we know how to connect a Lightning Web Component

(LWC) with the latest HTML data-attribute functionality and how to work with

 ‘this.template.querySelectorAll('.chkxBxs')’  and get familiar with checkboxes.