function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sandhya santhanagopalansandhya santhanagopalan 

either or selection for checkbox and hide/show <div>on select of checkbox

Hello,
Please help me code and solve the below issues in lightning component and its js.
1.either or selection on 2 checkboxes
2.hide/show a div on uncheck/check of checkbox
Thanks.
 
Best Answer chosen by sandhya santhanagopalan
Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
<aura:component>

        <ui:inputCheckbox label="Check Box" click="{!c.selectChange}"/>
        <ui:inputCheckbox label="check Box 2" click="{!c.selectChange}"/>
      

<!--PART 2 : create a Div with slds-hide class, control by toggle checkbox-->        
   <div aura:id="DivID" class="slds-hide">
     <ul>
        <li>account 1</li>
        <li>account 2</li>
        <li>account 3</li>
        <li>account 4</li>
        <li>account 5</li>    
     </ul>  
   </div>
    
 
</aura:component>
  
({
	selectChange : function(component, event, helper) {
        // first get the div element. by using aura:id
      var changeElement = component.find("DivID");
        // by using $A.util.toggleClass add-remove slds-hide class
      $A.util.toggleClass(changeElement, "slds-hide");
	  },
})
  
<aura:application extends="force:slds" >
    <c:HelloMessage1/>
</aura:application>

As per the link above i tried to replace input tag with ui inputcheckbox and it worked as expected!

if this is what you are trying to do and it solved your problem, please choose this as the best answer thank you!

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Sandhya,

May I suggest you please check with below link from the stack overflow community with a similar issue which will point you in the right direction. Hope this helps.

Please mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra
Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
I hope you can figure this out by following this link (http://www.sfdcmonkey.com/2017/01/16/toggle-checkbox-salesforce-lightning-component/)

If this help out please choose this as the best answer than you!
Akhilesh Reddy BaddigamAkhilesh Reddy Baddigam
<aura:component>

        <ui:inputCheckbox label="Check Box" click="{!c.selectChange}"/>
        <ui:inputCheckbox label="check Box 2" click="{!c.selectChange}"/>
      

<!--PART 2 : create a Div with slds-hide class, control by toggle checkbox-->        
   <div aura:id="DivID" class="slds-hide">
     <ul>
        <li>account 1</li>
        <li>account 2</li>
        <li>account 3</li>
        <li>account 4</li>
        <li>account 5</li>    
     </ul>  
   </div>
    
 
</aura:component>
  
({
	selectChange : function(component, event, helper) {
        // first get the div element. by using aura:id
      var changeElement = component.find("DivID");
        // by using $A.util.toggleClass add-remove slds-hide class
      $A.util.toggleClass(changeElement, "slds-hide");
	  },
})
  
<aura:application extends="force:slds" >
    <c:HelloMessage1/>
</aura:application>

As per the link above i tried to replace input tag with ui inputcheckbox and it worked as expected!

if this is what you are trying to do and it solved your problem, please choose this as the best answer thank you!
This was selected as the best answer