[SalesForce] Lightning Web Components – Radio button “checked” not retaining when navigating back and forth

I am not UI/UX person and I need help with setting radio button as checked when used in a LWC inner template-for-loop which involves page navigation and conditional rendering. I am able to get the selected value in my JS controller, but when I navigate back to the previous page, the "checked" property is not retaining although I still have the selected value. It might be easy to understand if you can look at the sample here:-
Sample

The reason I went with custom component for radio group is due to applying CSS to individual radio input.

Any help is appreciated. Thank you!

Best Answer

You have to bind the checked attribute of the radio group to your data (e. g. via adding a checked property to your options object) in order to keep track of the selected dom element.

Updated your example here

Related Solutions

[SalesForce] Radio Button onClick event not getting true

All other things working correctly, your use of action support is incorrect. It needs to be the child of the mage it is supporting not the parent since you already have an onClick on the input you can remove the action support altogether

<apex:inputRadio name="chosen" id="{!cWap.Id}" VALUE="{!cWap.Id}"  
                 onclick="setcontractId(this,'{!$Component.RadioButtonValue}');"/>

Also, javascript is CASE SENSITIVE so your function never gets called so change the onclick to this:

onclick="setcontractid(this,'{!$Component.RadioButtonValue}');"

To call the controller method, use action function and param

<apex:actionFunction name="setcontractid" action="{!onChangeContract}" rerender="">
   <apex:param value="" name="myparam" assignto="{!controllervariable}"/>
</apex:actionFunction>

and change your onClick to:

onclick="setcontractid(this.value);"

[SalesForce] Lightning radio selector in iteration disappears when option selected in another row

You need a unique name for each group:

<lightning:radioGroup name="{!'triggerType'+index}" 
                      variant="label-hidden"
                      options="{!v.triggerTypeOptions}"
                      value="{!co.STAT_ScheduledPaymentTriggerType__c}"
                      type="radio"/><br/>

This is standard HTML functionality. You can read more about it in the MDN documentation for <input type="radio">.

This is only an example; you can use any sort of unique identifier, just make sure each group has a unique name.

Best Answer

Related Solutions

[SalesForce] Radio Button onClick event not getting true

[SalesForce] Lightning radio selector in iteration disappears when option selected in another row

Related Topic