[SalesForce] My LWC radio button select is not working – not getting selection

I have a Lightning Web Component with a radio button group. If I select one, I need to capture the selection and conditionally display a div based on that selection. I can't seem to get it working – what am I missing?

<lightning-radio-group name="myOptions"
    label="My Options"
    options={myoptions}
    value={getSelection}
    type="radio"
    variant="label-inline">
</lightning-radio-group>  
<template if:true={isOption1}>                
    <div class="slds-m-around_medium slds-text-heading_small">
        My conditional display for Option 1
    </div>
</template>
<template if:true={isOption2}>                
    <div class="slds-m-around_medium slds-text-heading_small">
        My conditional display for Option 2
    </div>
</template>

My .js file code around this:

@track optionSelected;

getSelection(event) {
    this.optionSelected = event.detail.value;
    alert(this.optionSelected);
}

get isOption1(){return this.optionSelected == 'Opt1'}
get isOption2(){return this.optionSelected == 'Opt2'}

get myoptions() {
    return [
        { label: 'Option 1', value: 'Opt1' },
        { label: 'Option 2', value: 'Opt2' },
    ];
}

The alert is not being displayed, so it's not getting into the getSelection

Best Answer

You need to use an onchange handler, not the value attribute, which is used to set the attribute. Here's the corrected version:

<template>
<lightning-radio-group name="myOptions"
    label="My Options"
    options={myoptions}
    onchange={getSelection}
    type="radio"
    variant="label-inline">
</lightning-radio-group>  
<template if:true={isOption1}>                
    <div class="slds-m-around_medium slds-text-heading_small">
        My conditional display for Option 1
    </div>
</template>
<template if:true={isOption2}>                
    <div class="slds-m-around_medium slds-text-heading_small">
        My conditional display for Option 2
    </div>
</template>
</template>

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track optionSelected;

getSelection(event) {
    this.optionSelected = event.detail.value;
}

get isOption1(){return this.optionSelected == 'Opt1'}
get isOption2(){return this.optionSelected == 'Opt2'}

get myoptions() {
    return [
        { label: 'Option 1', value: 'Opt1' },
        { label: 'Option 2', value: 'Opt2' },
    ];
}

}

And the Playground link.

Related Solutions

[SalesForce] Lightning radio selector in iteration disappears when option selected in another row

You need a unique name for each group:

<lightning:radioGroup name="{!'triggerType'+index}" 
                      variant="label-hidden"
                      options="{!v.triggerTypeOptions}"
                      value="{!co.STAT_ScheduledPaymentTriggerType__c}"
                      type="radio"/><br/>

This is standard HTML functionality. You can read more about it in the MDN documentation for <input type="radio">.

This is only an example; you can use any sort of unique identifier, just make sure each group has a unique name.

[SalesForce] Iterating Radio Button Group

You need to use the checked attribute and the disabled attribute of the input. checked will be true if the option is selected. Add a data-value attribute to store the value.

See the HTML code.

<template>
    <fieldset class="slds-form-element">
        <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
        <div class="slds-form-element__control">
            <div class="slds-radio_button-group">
                <template for:each={options} for:item="op" for:index="index">
                    <span class="slds-button slds-radio_button" key={op.value}>
                    <input disabled={op.disabled} onchange={handleChange} checked={op.checked} type="radio" name={op.label} id={op.label} value={op.label} data-value={op.value}/>
                    <label class="slds-radio_button__label" for={op.label}>
                        <span class="slds-radio_faux">{op.label}</span>
                    </label>
                </span>
            </template>
        </div>
    </div>
    </fieldset>
</template>

JS Code

Please note I have added new attributes in the options list, checked and disabled.

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    value = '';

    @track options = [
        { label: 'Other', value: 'option1', disabled: true },
        { label: 'Sales', value: 'option2', },
        { label: 'Force', value: 'option3', checked: true },
    ]

    /* get options() {
        return [
            { label: 'Sales', value: 'option1' },
            { label: 'Force', value: 'option2', checked: true },
        ];
    } */

    handleChange(event) {
        console.log('event.detail.checked', event.target.checked);
        console.log('event.detail.checked', event.target.dataset.value);
        this.value = event.target.dataset.value;

        this.options.forEach(opt => {
            if (opt.value === this.value) {
                opt.checked = true;
            } else {
                opt.checked = false;
            }
        });
    }
}

Best Answer

Related Solutions

[SalesForce] Lightning radio selector in iteration disappears when option selected in another row

[SalesForce] Iterating Radio Button Group

Related Topic