[SalesForce] Which radio button is selected in lightning

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!

Best Answer

I have had to use the following:

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

for my radios

Related Solutions

[SalesForce] Radio Button in Lightning Design

You can use the lightningStylesheets attribute for <apex:page> to automatically style most Visualforce components on your page (including <apex:selectRadio>) to match the Lightning Experience UI:

Example:

<apex:page lightningStylesheets="true">

Alternatively, if you want to use the Lightning Design System (SLDS) to style your radio buttons in a Radio Group (in a similar format to how you have them set up in your example), you can use the following concept:

Example:

<!-- Include the Lightning Design System -->

<apex:slds />

<!-- Begin SLDS-styled content -->

<div class="slds-scope">

    <!-- Create a Radio Group -->

    <fieldset class="slds-form-element">
        <div class="slds-form-element__control">
            <apex:variable var="i" value="{!0}" />
            <apex:repeat value="{!SiteDetails}" var="rad">
                <apex:outputPanel rendered="{!rad.Site_Type__c == 'Radio'}">
                    <span class="slds-radio">
                        <input id="radio-{!i}" name="options" type="radio" value="{!rad.site__c}" />
                        <label class="slds-radio__label" for="radio-{!i}">
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">{!SiteOptions[rad]}</span>
                        </label>
                    </span>
                    <apex:variable var="i" value="{!i + 1}" />
                </apex:outputPanel>
            </apex:repeat>
        </div>
    </fieldset>

</div>

Result:

[SalesForce] Toggle between radio button in Lightning

Hitesh's Answer is correct.
You need to provide the same name for all radio buttons.

If you want to preselect a radio input,
you have to provide checked="" or checked="checked"

See https://jsfiddle.net/dLvu9av6/ for clarification

Related Topic