0

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.

2

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));
}
  • You are a genius and I am an idiot. – gs650x Nov 5 at 14:45
  • Thank you so much for your help – gs650x Nov 5 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.