I have below HTML code where I click on the header check box and it should check all the check box rows
<thead>
<tr class="slds-line-height_reset">
<th>
<lightning-input type="checkbox" variant="label-hidden" label="headerCheckbox"
onchange={headerCheckoxChanged}>
</lightning-input>
</th>
</thead>
<tbody>
<template if:true={lineItemData}>
<template for:each={lineItemData} for:item="lineItem">
<tr key={lineItem.lineItemId}>
<td>
<lightning-input type="checkbox" variant="label-hidden" value={lineItem.includedInAutomatedSupplies}
data-key={lineItem.lineItemId} label="dataCheckbox" onchange={dataChekChange}>
</lightning-input>
</td>
Below is the JS:
@track lineItemData;
headerCheckoxChanged(event) {
this.lineItemData.forEach(element =>{
element.includedInAutomatedSupplies = event.target.checked;
});
console.log(JSON.stringify(this.lineItemData));
}
UI snippet:
in the console log I can see the value of all checkBox change to true false as per the header but the same doesn't apply at the UI
Please suggest what I am missing.
Updated
In my debugging I tried printing the value of checkbox on the screen:
{lineItem.includedInAutomatedSupplies}
<lightning-input type="checkbox" variant="label-hidden" value={lineItem.includedInAutomatedSupplies}
data-key={lineItem.lineItemId} label="dataCheckbox" onchange={dataChekChange}>
</lightning-input>
In case of true value is showing as true but the checkbox is still unchecked
In case of false
Even value is behaving as expected but it doesn't update check box as it should,
Please confirm what I am missing something.
Best Answer
You used
value
instead ofchecked
in body checkboxes.Improvement:
It is better to use javascript function map instead of
forEach
because forEach modifies existing array and map will return new array.