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
Abhilasha_SinghAbhilasha_Singh 

Checkbox checked then fields will appear

Hi,
My question is : If i checked the checkbox then both fields will appear and if the checkbox is unchecked then both field will not appear.User-added image
Best Answer chosen by Abhilasha_Singh
Abhi_TripathiAbhi_Tripathi
You can do it by using ouput panel,

Here is an example of using it with a Button

Here is the Visualforce page having button and check box both are doing the same thing,  
<apex:page controller="testRender"  >

<script>
    function checkAllBoxs(ele) {
         
         if(ele.checked) {
             show();
         }
    }
                
</script>
<apex:form >
    <apex:actionFunction action="{!rerender}" name="show"/>
    <input type="checkbox" onclick="checkAllBoxs(this)"/>
    
<apex:pageBlock >
    <apex:pageBlockSection id="reRender" >
       <apex:pageBlockSectionItem >
            <apex:outputLabel value="End Date"    rendered="{! bool }" /> 
             <apex:inputField id="endDateField"    value="{!acc.name}"       rendered="{!bool }" />
          </apex:pageBlockSectionItem>
       </apex:pageBlockSection>
       
</apex:pageBlock>
<apex:commandButton action="{!rerender}" reRender="reRender" value="Rerender"/>
</apex:form>
</apex:page>

Here is apex class
  
public class testRender{
  public boolean bool {get;set;}
  public Account acc{get;set;}
    public testRender()
    {
      bool  = false;
    }
    public void rerender()
    {
     bool = !bool; 
    }
}

 

All Answers

Abhi_TripathiAbhi_Tripathi
You can do it by using ouput panel,

Here is an example of using it with a Button

Here is the Visualforce page having button and check box both are doing the same thing,  
<apex:page controller="testRender"  >

<script>
    function checkAllBoxs(ele) {
         
         if(ele.checked) {
             show();
         }
    }
                
</script>
<apex:form >
    <apex:actionFunction action="{!rerender}" name="show"/>
    <input type="checkbox" onclick="checkAllBoxs(this)"/>
    
<apex:pageBlock >
    <apex:pageBlockSection id="reRender" >
       <apex:pageBlockSectionItem >
            <apex:outputLabel value="End Date"    rendered="{! bool }" /> 
             <apex:inputField id="endDateField"    value="{!acc.name}"       rendered="{!bool }" />
          </apex:pageBlockSectionItem>
       </apex:pageBlockSection>
       
</apex:pageBlock>
<apex:commandButton action="{!rerender}" reRender="reRender" value="Rerender"/>
</apex:form>
</apex:page>

Here is apex class
  
public class testRender{
  public boolean bool {get;set;}
  public Account acc{get;set;}
    public testRender()
    {
      bool  = false;
    }
    public void rerender()
    {
     bool = !bool; 
    }
}

 
This was selected as the best answer
Prashant WayalPrashant Wayal
Hi Abhilasha,

Please see below code, it will help you,

Visualforce page: 
<apex:page controller="CheckboxController" Tabstyle="Account">
    <apex:form >
        <apex:pageBlock Title="Employment">
            
            <apex:pageBlockSection id="Selected_PBS">
                <apex:inputCheckbox label="Current Employed" value="{!selected}" id="checkedone">
                <apex:actionSupport event="onclick" rerender="Selected_PBS"/></apex:inputCheckbox>
                <apex:inputText value="{!expYears}" label="Years of Experience" rendered="{!selected}"/>
                <apex:inputText value="{!currentEmp}" label="Current Employer" rendered="{!selected}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    
</apex:page>

Apex Class: 
public class CheckboxController{
    public String currentEmp{ get; set; }
    public Integer expYears{ get; set; }
    public Boolean selected{ get; set; }
    
    public CheckboxController(){
        selected = false;
    }
}


Thank you,
Prashant
 
HNT_NeoHNT_Neo
Can this only be done using a custom visualforce page? I have a standard Opportunity page where I'd like this to happen on. Any suggestions?