How to make a lightning checkbox?

2.7K Asked by DavidEdmunds in Salesforce , Asked on May 4, 2023

To make a checkbox in LWC checked by default it has to have the "checked" attribute inside the markup and it is not responding on placing value=true or value= false inside the markup. But is there any way to assign a variable that would store the value.

lightning-input  class="slds-p-left_xx-large" type="checkbox" label="" onchange={handleChange} checked
I also tried to make the "checked" attribute a dynamic string variable but that too didn't work.

Basically I want to Select all checkbox clicks on which it will select the other checkboxes. But I am unable to assign any dynamic value to check and uncheck the boxes. Is there any workaround to it for LWC?

Answered by David Edmunds

You can add attributes checked to lightning-input from the javascript controller. You can access the lightning checkbox element by some attribute. In this example all checkboxes are accessed by setting the data-id attribute.

html file - js controller-

import { LightningElement, track, api } from 'lwc';

export default class lwcCmpName extends LightningElement {

    handleChange(event) {

        let i;

        let checkboxes = this.template.querySelectorAll('[data-id="checkbox"]')

        for(i=0; i

Here when Checkbox Select All will be checked all other checkboxes will be checked and same for unchecked.

Your Answer

Answer (1)

Ranjana

To create a Lightning checkbox in a Salesforce Lightning Aura Component, you would use the component. Here's a basic example of how you can create a Lightning checkbox

In this example:

We have an attribute isChecked of type Boolean to track the checked state of the checkbox.

We use the component with the type="checkbox" attribute to create the checkbox.

The label attribute specifies the label text for the checkbox.

The checked attribute is bound to the isChecked attribute using two-way data binding, ensuring that the checkbox state is synchronized with the isChecked attribute.

The onchange attribute specifies the controller action handleCheckboxChange that will be called when the checkbox value changes.

Now, let's define the controller action handleCheckboxChange in the corresponding JavaScript controller (controller.js) or helper (helper.js) file:

({

    handleCheckboxChange: function(component, event, helper) {

        // Retrieve the new checked state of the checkbox

        var isChecked = event.getSource().get("v.checked");

        







        // Update the isChecked attribute with the new value

        component.set("v.isChecked", isChecked);

        // You can perform additional actions based on the checkbox state change here

    }

})

In the handleCheckboxChange controller action:

We retrieve the new checked state of the checkbox using event.getSource().get("v.checked").

We update the isChecked attribute with the new value using component.set("v.isChecked", isChecked). This will automatically update the checkbox's checked state due to two-way data binding.

This creates a basic Lightning checkbox in an Aura Component, and the handleCheckboxChange action allows you to handle any logic or actions based on the checkbox state change.

6 Months