Pass value to lightning-input tag in LWC

Question

Does anyone know how to pass checked value to checkbox in Lightning Web Component?

My code looks like:

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
    @track isChecked;

    constructor() {
        super();
        isChecked = false;
    }   

}

<template>
    <lightning-card title="My Card" icon-name="custom:custom9">
        <div class="slds-m-around_medium">
                <lightning-input type="checkbox" label="my checkbox" name="input1" checked="{isChecked}"></lightning-input>
        </div>
    </lightning-card>    
</template>

and it doesn't work.

Scopophilia

Answer 1

The only way I have figured out how to do this is to add the checked attribute using JavaScript.

This example manually adds the checked attribute to the DOM element in the setter for isChecked.

JavaScript:

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
    @track _isChecked = false;

    set isChecked(newValue) {
        this._isChecked = newValue;
        this.template.querySelector('lightning-input.cb').checked = newValue;
    }
    get isChecked() {
        return this._isChecked;
    }

    toggleChecked() {
        this.isChecked = !this.isChecked;
    }

    onChecboxChange(event) {
        this.isChecked = event.target.checked;
    }
}

HTML:

<template>
    <lightning-input class="cb" type="checkbox" label="my checkbox" onchange={onChecboxChange}></lightning-input>
    <br/>
    <lightning-button label="Toggle Checkbox" onclick={toggleChecked}></lightning-button>
    <br/>
    Checked Value: {isChecked}
</template>

Example in LWC Playground: https://developer.salesforce.com/docs/component-library/tools/playground/1wDdErq4X/31/edit

Another way to do this instead of using a setter is to use the renderedCallback() lifecycle hook to invoke something like this.template.querySelector('lightning-input.cb').checked = newValue; whenever the template renders/re-renders. However, you will need to ensure the variable tracking the checked state is actually bound to the template somewhere, or else the template may not re-render when the variable is changed.

Heiner

Answer 2

The answer is simple, change your code to:

import { LightningElement, track } from 'lwc';
export default class MyComponent extends LightningElement {
    @track isChecked;

    constructor() {
        super();
        isChecked = false;
    }   

}
<template>
    <lightning-card title="My Card" icon-name="custom:custom9">
        <div class="slds-m-around_medium">
                <lightning-input type="checkbox" label="my checkbox" name="input1" checked={isChecked}></lightning-input>
        </div>
    </lightning-card>    
</template>

The checked property needs to be assigned this way:

checked={isChecked}

Plate

Answer 3

Please refer the code I have written for you, it should make sense if not ask me.

Your html for one or more check box

<template>
    For multiple Checkbox use Checkbox Group
    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={value}
                              onchange={handleChange}></lightning-checkbox-group>
    <p>Selected Values are: {selectedValues}</p>

      for just single Checkbox
    <input type="checkbox" name="vehicle1" value="Bike" id="mycheck" onclick={myFunction}> I have a bike<br>

    <p>Selected:</p> {checkvalue} 
</template>

Your js to handle that, For single checkbox right now it assign value (you actuallu asked for ) to check box to keep it simple you can modify it to assign true false depending on last value.

import { LightningElement, track } from 'lwc';

export default class CheckboxGroupBasic extends LightningElement {
    @track value = ['option1'];
    @track checkvalue ;

    get options() {
        return [
            { label: 'Ross', value: 'option1' },
            { label: 'Rachel', value: 'option2' },
        ];
    }

    get selectedValues() {
        return this.value.join(',');
    }

    handleChange(e) {
        this.value = e.detail.value;
    }

    myFunction(e){  // it is simple assigning value. here you can toggle value
         this.checkvalue = e.target.value;
    }
}

We have LWC Playground link you want to see it working. https://developer.salesforce.com/docs/component-library/tools/playground/1_UbRgnJ9/9/edit

Summarize

Answer 4

<template>
        <lightning-card  variant="Narrow"  title="Hello" icon-name="standard:account">
        <lightning-input type="toggle" label="Name"  onchange={displayStatus} ></lightning-input> 
         <lightning-card>
             {displaytext}
         </lightning-card>
    </lightning-card>   
</template>
=================================js=====================================

import { LightningElement, track } from 'lwc';

export default class ConditionalWebComponent extends LightningElement {
    @track status;
    @track displaytext= '';

    displayStatus(event){
       alert(event.target.checked);
        if(event.target.checked === true){ 
            this.displaytext = 'You are active';
        }if(event.target.checked === false){
            this.displaytext = 'You are inactive';
        }
    }

}

event.target.checked - will be used to get value from checkbox

Waterspout

Answer 5

You need to set event on the checkbox in order to track the behavior for example onclick and inside on method you can see the value inside event.target.checked. Here is sample code:

Checkbox tag:

<lightning-input type="checkbox" onclick={hereIsTheMethod} label="checkbox" name="someName"></lightning-input>

Javascript method:

hereIsTheMethod(event){
    console.log(event.target.checked);
}

Behold