0

enter image description here

HTML

 <lightning-checkbox-group  name={mapKey.key} label="Additional
    Billing Models" options={billingModelOptions} value={billingModelValue}
    onchange={handleBillingModelChange} required> </lightning-checkbox-group>

JS

get billingModelOptions() {
            return [
                { label: 'Fee', value: 'Fee' },
                { label: 'Usage Commitment', value: 'Usage Commitment' },
                { label: 'Straight Line Commitment', value: 'Straight-line Commitment' },
                
            ];
        }
        get selectedBillingModelValues() {
            return this.billingModelValue.join(',');
        }
        handleBillingModelChange(event) {
            this.billingModelValue = event.detail.value;}

If i click on fee checkbox in the first section then in the second section the fee chechbox also gets checked. How can i handle this?

2
  • can you share the markup for the second checkbox-group?
    – Damecek
    Aug 23 at 9:27
  • 1
    @Damecek The accordion section which contains this checkbox groups gets created from a for-each iteration Aug 23 at 9:50
1

Your problem is:

value={billingModelValue}

Here, every input generated is all bound to the same variable, so a change to any is a change to all.

To simplify the problem, imagine the following code:

let value;
value = 5;
value = 10;

What is value at the end? It should hopefully be obvious that the value is 10.

To get a unique value for each, you'll need to bind them to separate variables in memory. Since we've got an iteration going on, that means you'll want to store the data into the object.

 <lightning-checkbox-group  name={mapKey.key} label="Additional
   Billing Models" options={billingModelOptions} value={mapKey.value}
   onchange={handleBillingModelChange} required></lightning-checkbox-group>

...

handleBillingModelChange(event) {
  this.mapKey.find(key => event.target.name === key.key).value = event.target.value;
}

Without knowing more about your data structure, etc, I had to make some assumptions about the data, but this is the bare minimum change you'll need to make to get this to work.

6
  • Thanks for the help. Aug 23 at 16:31
  • I have one doubt I am using this mapkey to show results.. and the value of mapkey gets changed in the handle change method. How can I avoid that? Aug 23 at 16:32
  • @sonamsingh you can't. This is how it's meant to be.
    – sfdcfox
    Aug 23 at 17:13
  • I am still stuck..is there any way I can reach out to you for help Aug 24 at 12:41
  • @sonamsingh If you wish, you can email me.
    – sfdcfox
    Aug 24 at 12:58

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.