0

How can I bind attribute to result of lightning:input type="radio"

I have tried the following

<aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/>
<aura:attribute name="selectResult" type="Boolean[]" default="false, false, false"/>
<lightning:input type="radio" name="select" label="{!v.colors[0]}"  checked="{!v.selectResult[0]}"/>
<lightning:input type="radio" name="select" label="{!v.colors[1]}"  checked="{!v.selectResult[1]}"/>
<lightning:input type="radio" name="select" label="{!v.colors[2]}"  checked="{!v.selectResult[2]}"/>

{!v.selectResult[0]}
{!v.selectResult[1]}
{!v.selectResult[2]}

But the results are not updated after the value is unchecked, so after clicking on all three radio's all results will be set as true

I have also tried to use

value="{!v.result}"

but this ends up with empty attribute

2

Sadly this isn't possible. you need:

<lightning:input type="radio" name="select" value="{!v.colors[0]}" label="{!v.colors[0]}" onchange="{!c.handleRadioClick}" />
<lightning:input type="radio" name="select" value="{!v.colors[1]}" label="{!v.colors[1]}" onchange="{!c.handleRadioClick}" />
<lightning:input type="radio" name="select" value="{!v.colors[2]}" label="{!v.colors[2]}" onchange="{!c.handleRadioClick}" />

then in your controller

handleRadioClick : function(cmp, evt, helper){
     cmp.set('v.selectedOption', evt.getSource().get('v.value'));
}
0

You can do as this:

<ui:inputRadio name="gender" class="slds-float--left" label="{!selectedGender.label}"
                                   labelClass="slds-radio__label slds-m-right--x-large"
                                   text="{!selectedGender.value}"
                                   value="{!selectedGender.isSelected}"
                                   change="{!c.onGenderSelect}"/>

and for the change event you can pass code as:`onGenderSelect : function(component, event, helper) {

    var selectedGender = event.source.get("v.label");
    var objcontactDetails = component.get('v.contactDetails');
    console.log('Selected value is : ',objcontactDetails );

},  `

Try this and if this works you can mark it as the best answer.

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.