[SalesForce] Checkbox is always unchecked in LWC

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:

enter image description here

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

enter image description here

In case of false

enter image description here

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 of checked in body checkboxes.

    <td>
            <lightning-input type="checkbox" variant="label-hidden" 
                  checked={lineItem.includedInAutomatedSupplies}
                  data-key={lineItem.lineItemId} label="dataCheckbox" onchange={dataChekChange}>
            </lightning-input>
    </td>

Improvement:

It is better to use javascript function map instead of forEach because forEach modifies existing array and map will return new array.

headerCheckoxChanged(event) {
    this.lineItemData = this.lineItemData.map(element => {
        element.includedInAutomatedSupplies = event.target.checked;
        return element;
    });
    console.log(JSON.stringify(this.lineItemData));
}
Related Topic