2

I am working on a component that has a simple 2 option radio group. I want to show and hide a div (template if:true) based on the selected radio option. What I have here almost works but I have to click on the second radio button twice in order for it to show checked, even though the condition template does render.

I also need the first radio button to be checked by default. When i remove the "checked" state from the markup, it seems to work, but I need the first button checked by default.

I have tried onclick and onchange events, and have googled this a bunch, tried looping but nothing seems to be working, it seems to be related to the behavior of the "checked" state though for radios.

my handleRadioChange function :

handleRadioChange() {
    this.selectedOption = this.template.querySelector('input[name="radio-option"]:checked').value;
    console.log(this.selectedOption);
    if (this.selectedOption == "customPercentage") {
        this.monthlyOption = false;
        this.customPercentage = true;
    } else {
        this.monthlyOption = true;
        this.customPercentage = false;
    }

} 

my markup

<form name="discount-options"> 
    <label class="radio radio-before">
        <span class="radio__input">
            <input onchange={handleRadioChange} type="radio" data-id="option-1" name="radio-option" value="monthlyPrice" checked>
            <span class="radio__control"></span>
        </span>
        <span class="radio__label">Customize the monthly price
            <template if:true={monthlyOption}>
            <div style="max-width: 90%; margin: 0 auto;" data-id="option-1">
                <div class="formElement">
                    <label class="formlabel slds-text-title">Custom Monthly Price<span style="color:red">*</span></label>  
                        <lightning-input 
                            label="Custom Monthly Price"
                            required
                            variant="label-hidden"
                            placeholder="$1,000"
                            type="number" 
                            formatter="currency" 
                            step="0.01" 
                            value={customMonthlyPrice}>
                        </lightning-input>
                </div>
                <div class="formElement">
                    <label class="formlabel slds-text-title">Discount Expiration Date
                        <lightning-input 
                            label="If no expiration date is set, the discount will persist under you remove it"
                            type="date" 
                            placeholder="Select a date"
                            value={customExpirationDate} >
                        </lightning-input>
                    </label>
                </div>
            </div>
        </template>
        </span>
    </label>
<!-- second radio option section-->    
    <label class="radio radio-before">
        <span class="radio__input">
            <input onchange={handleRadioChange} data-id="option-2" type="radio" name="radio-option" value="customPercentage">
            <span class="radio__control"></span>
        </span>
        <span class="radio__label">Customize the discount percentage
            <template if:false={monthlyOption}>
            <div style="max-width: 90%; margin: 0 auto;">
                <div class="formElement">
                    <label class="formlabel slds-text-title">Custom Discount Percentage<span style="color:red">*</span></label>
                        <lightning-input 
                            label="Custom Discount Percentage"
                            required 
                            type="number" 
                            placeholder="$1,000.00"
                            variant="label-hidden"
                            formatter="percent" 
                            step="0.01" 
                            data-field="customMonthlyPrice" >
                        </lightning-input>
                </div>
                <div class="formElement">
                    <label class="formlabel slds-text-title">Discount Expiration Date
                        <lightning-input 
                            label="If no expiration date is set, the discount will persist under you remove it"
                            type="date" 
                            placeholder="Select a date"
                            data-field="expirationDate" >
                        </lightning-input>
                    </label>    
                </div>
            </div> 
        </template>
        </span>
      </label>  
    </form>
1
  • I want these to be bound together though because otherwise both can be selected and I don't want that. I ran into this earlier, and I believe they need to have the same name. Commented Feb 23, 2021 at 20:40

1 Answer 1

2

Instead of adding a checked attribute to the first input radio, bind it with the input property as:

<input
    onchange={handleRadioChange}
    type="radio"
    data-id="option-1"
    name="radio-option"
    value="monthlyPrice"
    checked={monthlyOption}
/>

Then in the controller, you can initialize the property monthlyOption = true; so as to mark the first option as selected.

Running example here, look at the app.html and app.js.

1
  • thanks! worked perfectly Commented Feb 23, 2021 at 21:27

You must log in to answer this question.

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