1

How do I know in the JS controller which radio button option is selected. I tried the below code for which I see "undefined" in console log

<span class="slds-radio">
    <input type="radio" aura:id = "nameRadioAuraId" id="nameRadioId" name="options" checked = "Checked" onclick="{!c.handleRadioClick}" />
    <label class="slds-radio__label" for="nameRadioId">
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">First/Last Name</span>
    </label>
</span>
<span class="slds-radio">
    <input type="radio" aura:id = "tokenRadioAuraId" value = "tkn" id="tokenRadioId" name="options" onclick="{!c.handleRadioClick}"/>
    <label class="slds-radio__label" for="tokenRadioId">
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Token</span>
    </label>
</span>

//controller.js
var selectedRadioOption = component.find("tokenRadioAuraId");
console.log("val1 = "+selectedRadioOption);
console.log("val1 = "+selectedRadioOption.get("v.selected"));

I tried. v.value, v.selected, v.checked none of them seem to be working. Can some point me in the right direction? Thanks!

4 Answers 4

6

I have had to use the following:

var opts = document.querySelector('input[name="options"]:checked').value;

for my radios

2
  • Saved my day!!!
    – SatyaV
    Commented Feb 13, 2018 at 17:55
  • Hey Eric, above JS worked well for me, but I had an issue within the Lightning for Outlook. Here is my post. My implementation shouldn't be wrong, but it doesn't seemed to be working well.
    – SatyaV
    Commented Feb 13, 2018 at 21:54
2

Try with event.target.value in controller

handleRadioClick:function(cmp,event,helper){
    console.log("val1 = "+event.target.value);
}

By using button click you may use Id to get value

   buttonclick : function(component,event,helper){
        var selectedRadioOption = document.getElementById("tokenRadioId").value;
        console.log(selectedRadioOption);
    }

Or you can get value from button click using

In component you may use

 <ui:inputRadio aura:id = "tokenRadioAuraId" value = "tkn" name="options" click="{!c.handleRadioClick}"/>

In controller

 buttonclick : function(component,event,helper){
        var selectedRadioOption = component.find("tokenRadioAuraId");
        console.log(selectedRadioOption.get("v.value"));
    }
2
  • This might not work as I need to know which radio button option was selected on button click and not when radio button is selected.
    – sfdcdev
    Commented Feb 19, 2017 at 6:21
  • 1
    I edited the answer as per your requirment
    – vignesh
    Commented Feb 19, 2017 at 8:04
1

I ended up doing a "value" attribute that I update in the JS Controller whenever an input radio is selected:

<aura:attribute name="value" type="String" access="global"/>

<input type="radio" name="options" id="nameRadioId" onchange="{!c.updateValue}"/>

And in the JS Controller I just use event.currentTarget.id.

If for whatever reason you can't/don't want to use the id, you can make use of a data-attribute:

<input type="radio" data-value="Whatever value I want" name="options" id="nameRadioId" onchange="{!c.updateValue}"/>

And then get it in your JS Controller with event.currentTarget.dataset.value.

Then whenever you need to know which radio option is selected, just use the "value" attribute of your component.

1

I found that you get the 'value' directly from event.currentTarget and not through the dataset. You can also get the id and name if required. My function is:

onWhatToUse: function(cmp, evt) {
    var selected = evt.currentTarget.value;
    cmp.set("v.whatToUse", selected);
    //console.log (evt.currentTarget.id);
    //console.log (evt.currentTarget.name);
 }//onWhatToUse

I wanted the buttons horizontal and used this structure:

<fieldset class="slds-form-element">
                <legend class="slds-form-element__legend slds-form-element__label">Which Location To Use:</legend>
                <div class="slds-form-element__control slds-list_horizontal">
                    <span class="slds-radio">
                        <input type="radio" id="rco" name="locations" checked="true" value="company"  onchange="{!c.onWhatToUse}" />
                        <label class="slds-radio__label" for="rco">
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">Use Company</span>
                        </label>
                    </span>
                    <span class="slds-radio">
                        <input type="radio" id="ryou" name="locations" value="you" onchange="{!c.onWhatToUse}"/>
                        <label class="slds-radio__label" for="ryou">
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">Use Your Location</span>
                        </label>
                    </span>
                    <span class="slds-radio">
                        <input type="radio" id="rhq" name="locations" value="headquarters"  onchange="{!c.onWhatToUse}"/>
                        <label class="slds-radio__label" for="rhq">
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">Use Headquarters</span>
                        </label>
                    </span>
                </div>
            </fieldset>

I have an attribute to hold the state:

<aura:attribute name="whatToUse" type="String"/>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .