Get Checkbox Value From Child to Parent in Lightning Web Component

Hello friends, In this post you will learn, how to get checkbox value from child component to parent lwc component, let's get started,

Checkbox value from child to parent in lightning web component

To implement this example you have to create two lwc component. One child component that contains checkbox field and second one is parent component that get the checkbox value from child component and display the same.

ChildComponent.html

 <template>
	<div style="width:100%;padding:1%">		
		<lightning-input type="checkbox" label="Select" checked={inputChk} onchange={chkChangeHandler}>
		</lightning-input>		
	</div>
 </template>

ChildComponent.js

 import { LightningElement } from 'lwc';
 export default class ChildComponent extends LightningElement {    
    inputChk;
	chkChangeHandler(event) {
        this.inputChk = event.target.checked;        
        const selectedEvent = new CustomEvent("valuechange", {
            detail: this.inputChk
        });
        this.dispatchEvent(selectedEvent);
    }
 }

ChildComponent.js-meta.xml

 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
 </LightningComponentBundle>

ParentComponent.html

 <template>
	<lightning-card title="Checkbox value from child to parent in Lightning Web Components" icon-name="action:announcement">		
		<c-child-component onvaluechange={childChkHandler}></c-child-component>
		<div style="margin-left:10px;">	
		<h1>{chkValue}</h1>
		</div>
	</lightning-card>
 </template>

ParentComponent.js

 import { LightningElement } from 'lwc';
 export default class ParentComponent extends LightningElement {
    chkValue;
	
    childChkHandler(event) {    
        this.chkValue=event.detail;
    }
 }

ParentComponent.js-meta.xml

 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__Tab</target>
	</targets>
 </LightningComponentBundle>

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.