Skip to main content
Topics#Lightning ExperienceSwathi V の質問
Swathi V (NA) が「#Lightning Experience」で質問
2017年7月10日 7:17

Based on the radio button selected additional options should be displayed/hidden

Hi All,

I have two radio buttons for selection.  Based on the radio button selected, I need to show up additional options for selection.  Currently by default, I am hiding the additional options using CSS.  When selecting the first radio button it shows up the additional options for the first radio buttion, but when i select the second radio button, ideally the first radio button's additional options should hide and the second radio button additional options should display.  But the first radio button's additional options are not hiding.

I have pasted the component, JS controller and CSS code for reference and would appreciate your help Please let me know if my approach is correct or suggest me a better way to handle this scenario

Component code is as follows 

<!--c:toggleCss-->

<aura:component >

    <fieldset class="slds-form-element">

        <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>

        <div class="slds-form-element__control">

            <span class="slds-radio">

                <input type="radio" id="radio-1" name="options" value="on"/>

                <label class="slds-radio__label" for="radio-1" onclick="{!c.toggle}">

                    <span class="slds-radio_faux" aura:id="radio-1"></span>

                    <span class="slds-form-element__label">show all time charges awaiting my review</span>

                </label>

            </span>            

        </div>

    </fieldset>

    <fieldset class="slds-form-element toggle" aura:id="ShowOptions">        

        <span class="slds-radio">

            <input type="radio" id="radio-1a" name="addoptions" value="on" />

            <label class="slds-radio__label" for="radio-1a">

                <span class="slds-radio_faux"></span>

                <span class="slds-form-element__label">show Unapproved only</span>

            </label>

        </span>

        <span class="slds-radio">

            <input type="radio" id="radio-1b" name="addoptions" value="on" />

            <label class="slds-radio__label" for="radio-1b">

                <span class="slds-radio_faux"></span>

                <span class="slds-form-element__label">show all time charges</span>

            </label>

        </span>        

    </fieldset>

    

    <fieldset class="slds-form-element">

        <div class="slds-form-element__control">

            <span class="slds-radio" aura:id="radio-2" >

                <input type="radio" id="radio-2" name="options" value="on"/>

                <label class="slds-radio__label" for="radio-2" onclick="{!c.toggle1}">

                    <span class="slds-radio_faux" ></span>

                    <span class="slds-form-element__label">show all time charges to be review by</span>

                </label>

            </span>            

        </div>

    </fieldset>

    <fieldset class="slds-form-element toggle1" aura:id="ShowOptions1">        

        <span class="slds-radio">

            <input type="radio" id="radio-2a" name="addoptions" value="on" />

            <label class="slds-radio__label" for="radio-2a">

                <span class="slds-radio_faux"></span>

                <span class="slds-form-element__label">show Unapproved only</span>

            </label>

        </span>

        <span class="slds-radio">

            <input type="radio" id="radio-2b" name="addoptions" value="on" />

            <label class="slds-radio__label" for="radio-2b">

                <span class="slds-radio_faux"></span>

                <span class="slds-form-element__label">show all time charges</span>

            </label>

        </span>        

    </fieldset>

</aura:component>

JS controller code is as follows

/*toggleCssController.js*/

({

   toggle : function(component, event, helper) {

        var toggleText = component.find("ShowOptions");

        $A.util.toggleClass(toggleText, "toggle");

    },

    toggle1 : function(component, event, helper) {

        var toggleText1 = component.find("ShowOptions1");

        $A.util.toggleClass(toggleText1, "toggle1");        

    }

})

CSS as foloows 

/*toggleCss.css*/

.THIS.toggle {

    display: none;

}

.THIS.toggle1 {

    display: none;

}

Screenshot

Based on the radio button selected additional options should be displayed/hidden

Thanks in advance

V Swathi
5 件の回答
  1. Gaurav GARG (Panasonic Asia Pacific Ltd.)
    2017年7月10日 9:43
    Hi Swati, 

    Please try below updated code:

     

    Component:
    <aura:component >
        <fieldset class="slds-form-element">
            <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
            <div class="slds-form-element__control">
                <span class="slds-radio">
                    <input type="radio" id="radio-1" name="options" value="on"/>
                    <label class="slds-radio__label" for="radio-1" onclick="{!c.toggle}">
                        <span class="slds-radio_faux" aura:id="radio-1"></span>
                        <span class="slds-form-element__label">show all time charges awaiting my review</span>
                    </label>
                </span>            
            </div>
        </fieldset>
        <div class="toggle" aura:id="ShowOptions">        
            <span class="slds-radio">
                <input type="radio" id="radio-1a" name="addoptions" value="on" />
                <label class="slds-radio__label" for="radio-1a">
                    <span class="slds-radio_faux"></span>
                    <span class="slds-form-element__label">show Unapproved only</span>
                </label>
            </span>
            <span class="slds-radio">
                <input type="radio" id="radio-1b" name="addoptions" value="on" />
                <label class="slds-radio__label" for="radio-1b">
                    <span class="slds-radio_faux"></span>
                    <span class="slds-form-element__label">show all time charges</span>
                </label>
            </span>        
        </div>
        <fieldset class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-radio" aura:id="radio-2" >
                    <input type="radio" id="radio-2" name="options" value="on"/>
                    <label class="slds-radio__label" for="radio-2" onclick="{!c.toggle1}">
                        <span class="slds-radio_faux" ></span>
                        <span class="slds-form-element__label">show all time charges to be review by</span>
                    </label>
                </span>            
            </div>
        </fieldset>
        <div class="slds-form-element toggle1" aura:id="ShowOptions1">        
            <span class="slds-radio">
                <input type="radio" id="radio-2a" name="addoptions" value="on" />
                <label class="slds-radio__label" for="radio-2a">
                    <span class="slds-radio_faux"></span>
                    <span class="slds-form-element__label">show Unapproved only</span>
                </label>
            </span>
            <span class="slds-radio">
                <input type="radio" id="radio-2b" name="addoptions" value="on" />
                <label class="slds-radio__label" for="radio-2b">
                    <span class="slds-radio_faux"></span>
                    <span class="slds-form-element__label">show all time charges</span>
                </label>
            </span>        
        </div>
    </aura:component>

     

    JS controller:
    /*toggleCssController.js*/
    ({
       toggle : function(component, event, helper) {
            var toggleText = component.find("ShowOptions");
            var toggleText1 = component.find("ShowOptions1");
            $A.util.toggleClass(toggleText, "toggle");
            $A.util.addClass(toggleText1, "toggle1");
        },
        toggle1 : function(component, event, helper) {
            var toggleText1 = component.find("ShowOptions1");
            var toggleText = component.find("ShowOptions");
            $A.util.toggleClass(toggleText1, "toggle1");    
            $A.util.addClass(toggleText, "toggle");
        }
    })

     

    Style Class:
    /*toggleCss.css*/
    .THIS.toggle {
        display: none;
        color:red;
    }
    .THIS.toggle1 {
        display: none;
        color: blue;
    }

    It is working fine at my end. 

    Hope this helps. 

    Thanks,

    Gaurav

    Skype: gaurav62990
回答を記入...
0/9000