lightning:input type=“radio” result binding

Question

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

Answer 1

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'));
}

Answer 2

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.