+ Start a Discussion
sreekanth thamminennisreekanth thamminenni 

When click on button, checkbox to be checked in UI in realtime

The below mentioned is not properly working, only first time it is working, If I am checking and unchecking and clicking on the button it is in false stage only.

    <lightning-input type="checkbox" checked={Item}></lightning-input>
    <lightning-button label="reset" onclick={resetcheckboxhandler}></lightning-button>

import { LightningElement,track } from 'lwc';
export default class Checkboxcheck extends LightningElement {
     @track Item = false;
        this.Item = true;
Anonymous DeveloperAnonymous Developer

You can attach event handlers with Javascript.

var a = document.getElementById("checkboxopt1");
a.addEventListener("click", exFunction, false);




(function (domElements, cbState)

{ function clickCallback() {




function toggleElements(className, initialShow) {


var checkNumber = ((/ editoropt(d*) /).exec(className))[1],

checkBox = document.getElementById('checkboxopt' + checkNumber),

division = document.querySelectorAll('.editoraccvar' + checkNumber)[0],

isShown = initialShow === undefined ? window.getComputedStyle(division).display === 'none' : initialShow;



division.style.display = isShown ? 'block' : 'none';

checkBox.checked = isShown;




.filter(function (el) {

       return el.className.indexOf('editoropt') !== -1;



.forEach(function (el, index) {

             el.addEventListener('click', clickCallback, false);

              toggleElements(el.className, cbState[index]); });


// Initial state of the checkboxes goes in the second parameter. The index in the array correspond to the checkbox position in the page.


([].slice.call(document.querySelectorAll('.seq-box-form-field')), [false, false]);

Anonymous DeveloperAnonymous Developer
This array of values will correspond to the initial state of the checkboxes: