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!

6

I have had to use the following:

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

for my radios

  • Saved my day!!! – Arnold Jr. Feb 13 '18 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. – Arnold Jr. Feb 13 '18 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"));
    }
  • 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 Feb 19 '17 at 6:21
  • 1
    I edited the answer as per your requirment – vignesh Feb 19 '17 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.

0

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"/>

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.