Hey guys, today in this post we are going to learn about How to get checkbox value in lwc component and display the selected value using of “lightning-checkbox-group” property in Lightning Web Component (LWC) Salesforce.
A lightning-checkbox-group component represents a checkbox group that enables selection of single or multiple options.
If the required attribute is set, at least one checkbox must be selected. When a user interacts with the checkbox group and doesn’t make a selection, an error message is displayed. You can provide a custom error message using the message-when-value-missing attribute.
If the disabled attribute is set, checkbox selections can’t be changed.
This example creates a checkbox group with three options and option1 is selected by default. To read more about lightning-checkbox-group, click Here..
Files we used to get selected checkbox value in LWC
| lwcCheckboxValue.html | LWc HTML File | Template HTML file to get selected checkbox value in Salesforce Lightning Web Component (LWC) |
| lwcCheckboxValue.js | LWC JavaScript File | It’s hold a javascript on Handle handleChange function to get the value of selected checkbox in lwc. |
| lwcCheckboxValue.js-meta.xml | XML Meta File | It is used to where this lightning web component file you want to display as lightning__AppPage, lightning__RecordPage, lightning__HomePage. |
Final Output
- Do you know:- The Best Oneplus 5g Mobiles Android Phones are best-in-class and offer supreme performance, connectivity features, camera and display quality, long-lasting battery life and many more..
Other related post that would you like to learn in Salesforce
- Find the below steps
Create Lightning Web Component HTML
Step 1:- Create Lightning Web Component HTML ➡ lwcCheckboxValue.html
SFDX:Lightning Web Component ➡ New ➡ lwcCheckboxValue.html
lwcCheckboxValue.html [Lightning Web Component HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<template> <div class="slds-p-around--medium"> <h3 class="slds-text-heading_medium"><strong style="color:#270086;">Get checkbox value and display the selected value in Lightning Web Component (LWC) </strong></h3> <br/> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_2-of-12"> <lightning-checkbox-group name="Checkbox Group" label="Checkbox Group" options={options} value={value} onchange={handleChange}></lightning-checkbox-group> </div> <div class="slds-col slds-size_10-of-12"> <template if:true={integrationVal}> <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Salesforce IntegrationVal</strong></h3> <p>How to Integrate Amazon S3 into Salesforce Uses of Named Credentials and checked the results Status=OK, StatusCode=200 after connected Amazon AWS S3 through the anonymous window in Salesforce | Integrate aws s3 using named credentials in Salesforce. <span class="readMore"><a href="https://www.w3web.net/aws-s3-integration-step-by-step-in-salesforce/" target="_blank" rel="noopener noreferrer">more...</a></span></p> </template> <template if:true={salesforceLWCVal}> <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Salesforce LWC</strong></h3> <p>Retrieve picklist values dynamically of Opportunity Object without apex class using ‘uiObjectInfoApi’ property and displaying the selected pick-list value in Salesforce Lightning Component — LWC. <span class="readMore"><a href="https://www.w3web.net/lwc-fetch-picklist-values-without-apex-in-salesforce/" target="_blank" rel="noopener noreferrer">more...</a></span></p> </template> <template if:true={auraComponentVal}> <h3 class="slds-text-heading_medium slds-text-color--error"><strong>Aura Component</strong></h3> <p>The Lightning Component framework is a UI framework for developing web apps for mobile and desktop devices. It's a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. To live demo project learn <span class="readMore"><a href="https://www.w3web.net/tutorial/lightning-component/" target="_blank" rel="noopener noreferrer">more...</a></span></p> </template> </div> </div> <br/><br/> <p style="color: #ff0000;">Selected Values are: <strong>{value}</strong></p> <br/><br/> Read more about <a href="https://www.w3web.net/tutorial/salesforce-lwc/" target="_blank" rel="noopener noreferrer">Salesforce LWC</a> </div> <br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p> <br/><br/> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li> <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li> <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li> <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li> <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li> <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li> <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a> </div> </div> </div> <!--End RelatedTopics Section--> </lightning-card> </template> </template> |
Create Lightning Web Component Javascript
Step 2:- Create Lightning Web Component Javascript ➡ lwcCheckboxValue.js
SFDX:Lightning Web Component ➡ New ➡ lwcCheckboxValue.js
lwcCheckboxValue.js [LWC JavaScript File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { LightningElement,track } from 'lwc'; export default class LwcCheckboxValue extends LightningElement { value = 'integration'; get options() { return [ { label: 'Salesforce Integration', value: 'integration' }, { label: 'Salesforce LWC', value: 'salesforceLWC' }, { label: 'Aura Component', value: 'auraComponent' }, ]; } @track integrationVal = true; @track salesforceLWCVal = false; @track auraComponentVal = false; handleChange(event) { this.value = event.detail.value; //alert('value!!! ' + this.value); if (this.value == 'integration'){ this.integrationVal = true; }else{ this.integrationVal = false; } if (this.value == 'salesforceLWC'){ this.salesforceLWCVal = true; }else{ this.salesforceLWCVal = false; } if (this.value == 'auraComponent'){ this.auraComponentVal = true; }else{ this.auraComponentVal = false; } } } |
Create Lightning Web Component Meta XML
Step 3:- Create Lightning Web Component Meta XML ➡ lwcCheckboxValue.js-meta.xml
SFDX:Lightning Web Component ➡ New >> lwcCheckboxValue.js-meta.xml
lwcCheckboxValue.js-meta.xml [LWC Meta Data XML]
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Further post that would you like to learn in Salesforce
Flyout is a free, simple way to earn money.
If you think you and your family members also like to earn money in additional time, then go this link. In this site, you can earn money for the lifetime at low effort. To Earn Unlimited Everyday With This Trick, Sign Up Free.. Get Started for Free
Flyout is a free, simple way to earn money by placing sponsored content on your blog
Check Out:- Earn Unlimited Everyday With This Trick:- Click Here
FAQ (Frequently Asked Questions)
What is the difference between checkbox and option button?
In Check box, you can select multiple options. In Option Button (Radio button) you can select one option. Radio buttons are circular and check boxes are square.
Can radio button be unchecked?
Radio button helps in ensuring only one option is selected. However, it doesn't allow user to deselect the option.
What is checkbox?
The CheckBox control allows the user to set true/false or yes/no type options. The user can select or deselect it.
Related Topics | You May Also Like
How to pass checkbox value, marked required and marked enabled/disabled in Salesforce Lightning Web Component (LWC) | set value of checkbox with enabled/disabled and required uses of lightning-checkbox-group tags in lightning web component – LWC
Deleting multiple records dynamically with checkbox on delete button in lightning web component salesforce — LWC | how to delete selected records in lwc
How to display different types of custom toast message as Error, Success, Info and warning toast notifications on click button, uses of ShowToastEvent property in Salesforce Lightning Web Component — LWC | display custom toast notification in lwc
How to create lightning-card container with custom tab functionality uses a button in the actions slot where we are opening a lightning popup inside a custom form, displaying plain text in the footer slot in Salesforce LWC | How to apply lightning-card to create stylized container around a grouping of information to display different section like Header, Body, Footer and button actions with open a popup inside form in Salesforce LWC (Lightning Web Component)
Custom Validation in a Lightning Input Field on Click Button in Lightning Component Salesforce | required field validation to display error messages in Salesforce lightning component
How to align lightning-input form elements horizontally uses of slds-form-element_horizontal css and lightning-card tag in Lightning Web Component – LWC | How to create horizontal input label using slds-form-element/slds-form-element_horizontal style css property in LWC – Lightning Web Component Salesforce
Display message to lightning helptext Icon on mouse hover/visit or click using “lightning-helptext” elements in Lightning Web Component (LWC) | lightning helptext message show/hide on mouse hover/visit icon in lwc
how to set/get required value of ‘Radio Group’ & ‘Radio Group Button Type’ and display selected value as enabled/disabled or selected/deselected horizontally uses of ‘lightning-checkbox-group’ tags in lightning web component – LWC Salesforce | How to change the lightning-radio-group selected value as checked/unchecked and set default selected radio button in Salesforce LWC (Lightning Web Component)
- Your reaction of the article ▾
Author of w3web.net
Hi, I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
Fastest Fast Loading AdSense Friendly Blogger Template
Thankyou for sharing good and informative blog. Love to read this. For more related informations.