+ 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.

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

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

You can attach event handlers with Javascript.


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

 

OR

 

(function (domElements, cbState)

{ function clickCallback() {

toggleElements(this.className);

}

 

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;

}

 

domElements

.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: