function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Zeeshan Moulvi 2Zeeshan Moulvi 2 

Dynamically hide pageblock section based on checkbox


We have requirement where in we need to display fields based on the checkbox selected .I have written a VF page and Apex classe but still not able to acieve the requirement below are the few points i am trying to achieve.
1. When first checkbox is selected second checkbox should be hidden and viceversa.
2. Also we need to clear the values from the  dependent fields in the pageblock section on unchecked box.

Any lead or steps to achieve this is very hepfull.

Thanks in Advance.
Visualforce Page:


<apex:page standardController="Opportunity" extensions="rpac">

<apex:form >
<apex:pageBlock >
  <apex:pageBlockSection columns="1" id="Test" >
 <apex:inputcheckbox value="{!Opportunity.abc__c}" >
 <apex:actionSupport event="onchange"  action="{!aaa}" rerender="Test" />
</apex:inputcheckbox>
  <!--<apex:outputPanel rendered="{!(Opportunity.abc__c)}" > -->
		<apex:inputField value="{!Opportunity.abc__c}"  rendered="{!(Opportunity.abc__c)}" />
        <apex:inputField value="{!Opportunity.abc_Class__c}" rendered="{!(Opportunity.abc__c)}" />
        <apex:inputField value="{!Opportunity.abc_Transition_Phase__c}" rendered="{!(Opportunity.abc__c)}" />
   </apex:pageBlockSection>
   
   <apex:pageBlockSection columns="1" id="Test1" > 
     <apex:inputcheckbox value="{!Opportunity.xyz__c}" > <!--removed selected=true label="Same as Above" -->
     <apex:actionSupport event="onchange" action="{!bbb}" rerender="Test1" />
     </apex:inputcheckbox>    
        <apex:inputField value="{!Opportunity.ayz_Payment_Terms__c}" rendered="{!(Opportunity.xyz__c)}" />
        <apex:inputField value="{!Opportunity.xyz_Record_Delete__c}" rendered="{!(Opportunity.xyz__c)}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>


Apex class:

public with sharing class Repack{

    public Opportunity test{get;set;}
    public Opportunity test1{get;set;}
    public boolean abc {get;set;}
    public boolean ayz{get;set;}

        public Repack(ApexPages.StandardController stdCtrl) {
        this.test=(Opportunity)stdCtrl.getRecord();
        abc=False;
        this.test1=(Opportunity)stdCtrl.getRecord();
        ayz= False;
        //this.test=true;//observe the change in this line.Added this for proper behaviour on load 
       }
       
       public pagereference aaa(){
           
           return null;
       }
       public pagereference bbb(){
           
           return null;
       }

   }

User-added image
Best Answer chosen by Zeeshan Moulvi 2
Sarvesh_OjhaSarvesh_Ojha
Hi Zeeshan,

Try this.
 
Visualforce Page:


<apex:page standardController="Opportunity" extensions="Repack">
<apex:form >
<apex:pageBlock >

<apex:pageBlockSection columns="1" id="Test" >
  <apex:inputcheckbox value="{!abc}" >
    <apex:actionSupport event="onchange"  action="{!aaa}" rendered="{!bool}" />
  </apex:inputcheckbox>
  <apex:inputField value="{!Opportunity.Class__c}" />
  <apex:inputField value="{!Opportunity.Transition_Phase__c}" />
  </apex:pageBlockSection>
   
<apex:pageBlockSection columns="1" id="Test1" > 
  <apex:inputcheckbox value="{!xyz}" > 
    <apex:actionSupport event="onchange" action="{!bbb}" rendered="{!bool}" />
  </apex:inputcheckbox>    
  <apex:inputField value="{!Opportunity.Payment_Terms__c}" />
  <apex:inputField value="{!Opportunity.Record_Delete__c}"/>
</apex:pageBlockSection>

</apex:pageBlock>
</apex:form>
</apex:page>


Apex class:

public with sharing class Repack{

    public boolean abc {get;set;}
    public boolean xyz{get;set;}
    public boolean bool{get;set;}

    public Repack(ApexPages.StandardController stdCtrl){   	
    	abc=False;    	
    	ayz= False;
	bool = false;
    	//this.test=true;//observe the change in this line.Added this for proper behaviour on load 
    }
       
    public void aaa(){
	if(abc == true){
		xyz = false;
	   	bool = true;
	}else{
		bool = false;
	}
    }

    public void bbb(){
	if(xyz == true){
	   	abc = false;
	   	bool = true;
	 }else{
	   	bool = false;
	 }
    }
}

Thanks,
Sarvesh

All Answers

Sarvesh_OjhaSarvesh_Ojha
Hi Zeeshan,

Try this.
 
Visualforce Page:


<apex:page standardController="Opportunity" extensions="Repack">
<apex:form >
<apex:pageBlock >

<apex:pageBlockSection columns="1" id="Test" >
  <apex:inputcheckbox value="{!abc}" >
    <apex:actionSupport event="onchange"  action="{!aaa}" rendered="{!bool}" />
  </apex:inputcheckbox>
  <apex:inputField value="{!Opportunity.Class__c}" />
  <apex:inputField value="{!Opportunity.Transition_Phase__c}" />
  </apex:pageBlockSection>
   
<apex:pageBlockSection columns="1" id="Test1" > 
  <apex:inputcheckbox value="{!xyz}" > 
    <apex:actionSupport event="onchange" action="{!bbb}" rendered="{!bool}" />
  </apex:inputcheckbox>    
  <apex:inputField value="{!Opportunity.Payment_Terms__c}" />
  <apex:inputField value="{!Opportunity.Record_Delete__c}"/>
</apex:pageBlockSection>

</apex:pageBlock>
</apex:form>
</apex:page>


Apex class:

public with sharing class Repack{

    public boolean abc {get;set;}
    public boolean xyz{get;set;}
    public boolean bool{get;set;}

    public Repack(ApexPages.StandardController stdCtrl){   	
    	abc=False;    	
    	ayz= False;
	bool = false;
    	//this.test=true;//observe the change in this line.Added this for proper behaviour on load 
    }
       
    public void aaa(){
	if(abc == true){
		xyz = false;
	   	bool = true;
	}else{
		bool = false;
	}
    }

    public void bbb(){
	if(xyz == true){
	   	abc = false;
	   	bool = true;
	 }else{
	   	bool = false;
	 }
    }
}

Thanks,
Sarvesh
This was selected as the best answer
Ankur Saini 9Ankur Saini 9
Hi Zeeshan
try this:-

 
<apex:page standardController="Opportunity">
<script>
    function valuetonull(elem){
        document.getElementById('{!$Component.frm:pb1:Test:id1}').value=null;
        document.getElementById('{!$Component.frm:pb1:Test:id2}').value=null;       
    }
    
    function valuetonull2(elem){
        document.getElementById('{!$Component.frm:pb1:Test1:id3}').value=null;
        document.getElementById('{!$Component.frm:pb1:Test1:id4}').value=null;       
    }

</script>
    <apex:form id="frm">
        <apex:pageBlock id="pb1">
            <apex:pageBlockSection columns="1" id="Test" >
                <apex:inputcheckbox value="{!Opportunity.Application_Submitted__c}" rendered="{!!(Opportunity.Needs_Insurance__c)}" onclick="valuetonull(this);" >
                    <apex:actionSupport event="onchange" rerender="Test,Test1"/>
                </apex:inputcheckbox>
                <apex:inputField value="{!Opportunity.Amount__c}" rendered="{!(Opportunity.Application_Submitted__c)}" id="id1"/>
                <apex:inputField value="{!Opportunity.Lost_Amount__c}" rendered="{!(Opportunity.Application_Submitted__c)}" id="id2"/>
            </apex:pageBlockSection>
                   
            <apex:pageBlockSection columns="1" id="Test1" > 
                <apex:inputcheckbox value="{!Opportunity.Needs_Insurance__c}" rendered="{!!(Opportunity.Application_Submitted__c)}" onclick="valuetonull2(this);">
                    <apex:actionSupport event="onchange" rerender="Test1,Test"/>
                </apex:inputcheckbox>    
                <apex:inputField value="{!Opportunity.PipeLine_Amount__c}" rendered="{!(Opportunity.Needs_Insurance__c)}" id="id3"/>
                <apex:inputField value="{!Opportunity.Promo_Code__c}" rendered="{!(Opportunity.Needs_Insurance__c)}" id="id4"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Thanks 
Ankur Saini
Zeeshan Moulvi 2Zeeshan Moulvi 2
Hi Sarvesh,

Thank you very much for the logic. it worked.

Thanks,
Zeeshan.