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
Vandana Rattan 4Vandana Rattan 4 

Visualforce rerender formatting issue

Hi,

I am building a Visualforce page for our force.com site. I am running into a formatting issue when I try to rerender. I have 4 Checkbox option buttons. If anyone is selected others have to be collapsed. Currently I have implemented the actionSupport only for first checkbox. Other 3 checkboxes collpase properly. But if I uncheck option1 formatting for other 3 is lost. How can I resolve this issue. PFB the code for checkboxes:
 
<apex:outputPanel layout="block" styleClass="requiredBlock" id="opt1OP">
    					<apex:outputText value="Option 1" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
						</apex:outputPanel>
						
						<apex:outputPanel layout="block" id="opt1CB">
                        <apex:inputCheckbox id="chckOpt1" style="width:10px;height:10px;" value="{!val1}" />
                                                           
                            <apex:outputLabel value="I am a sole practitioner" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt1"/>
                            <apex:actionSupport event="onchange" reRender="opt2OP,opt3OP,opt4OP" action="{!find}"/>
                            
                        </apex:outputPanel>
						<br></br>

						<apex:outputPanel id="opt2OP">
						<apex:outputPanel layout="block" styleClass="requiredBlock" rendered="{!NOT(val1)}">
    					<apex:outputText value="Option 2" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
						</apex:outputPanel>

						<apex:outputPanel layout="block" rendered="{!NOT(val1)}">
                        <apex:inputCheckbox id="chckOpt2" style="width:10px;height:10px;" value="{!val2}" />
                                                           
                            <apex:outputLabel value="I am employed by a corporation or partnership" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt2"/>
                            <apex:outputText value="Please enter your Employer's Name" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                            <apex:inputText value="{!case.Employer_s_Name__c}" id="empNameOpt2" styleClass="inputText" style="font-family:Open Sans;"/>
                        </apex:outputPanel> 
						</apex:outputPanel>
						<br></br>
						<apex:outputPanel id="opt3OP">
						<apex:outputPanel layout="block" styleClass="requiredBlock" rendered="{!NOT(val1)}">
    					<apex:outputText value="Option 3" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
						</apex:outputPanel>

						<apex:outputPanel layout="block" rendered="{!NOT(val1)}">
                        <apex:inputCheckbox id="chckOpt3" style="width:10px;height:10px;" value="{!val3}"/>
                                                           
                            <apex:outputLabel value="I am employed by a Commonwealth/State/Local Government" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt3"/>
                            <apex:outputText value="Please enter your Employer's Name" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                            <apex:inputText value="{!case.Employer_s_Name__c}" id="empNameOpt3" styleClass="inputText" style="font-family:Open Sans;"/>
                        </apex:outputPanel> 
						</apex:outputPanel>
						<br></br>

						<apex:outputPanel id="opt4OP">
						<apex:outputPanel layout="block" styleClass="requiredBlock" rendered="{!NOT(val1)}">
    					<apex:outputText value="Option 4" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
						</apex:outputPanel>

						<apex:outputPanel layout="block" rendered="{!NOT(val1)}">
                        <apex:inputCheckbox id="chckOpt4" style="width:10px;height:10px;" value="{!val4}"/>
                                                           
                            <apex:outputLabel value="I am not covered by a policy" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt4"/>
                        </apex:outputPanel>
						</apex:outputPanel>

Thanks in Advance.
Best Answer chosen by Vandana Rattan 4
Rupal KumarRupal Kumar
Use Java Script..............

<apex:page controller="CheckboxRerenderController">

    <script>
        function hide(){
            if(document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.inputcheckbox1}').checked==true){
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='None';
                
            }
            else{
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='inline';
                 document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='inline';
            }
        }
    </script>


    <apex:form id="theform">    
        <apex:pageBlock id="thepageBlock">
          <apex:outputLabel value="Option1" id="outputLabel01" />
            <apex:pageblocksection id="pageblocksection">
                <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox1" onclick="hide();"/>    
                <apex:outputLabel value="I am a sole practitioner" id="outputLabel1"/>
                </apex:pageblocksection>
                
                 <apex:outputLabel value="Option2"  id="outputLabel02"/>
                 <apex:pageblocksection id="pageblocksection1">
                <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox2"/>    
                <apex:outputLabel value="I am employed by a corporation or partnership" id="outputLabel2"/>
                </apex:pageblocksection>
                
                 <apex:outputLabel value="Option3"  id="outputLabel03" />
                 <apex:pageblocksection id="pageblocksection2">
                  <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox3"/>    
                <apex:outputLabel value="Please enter your Employer's Name" id="outputLabel3"/>
                </apex:pageblocksection>
                
                  <apex:outputLabel value="Option4"  id="outputLabel04" />
                 <apex:pageblocksection id="pageblocksection3">
                <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox4"/>    
                <apex:outputLabel value="I am employed by a Commonwealth/State/Local Government" id="outputLabel4"/>
            </apex:pageblocksection>
         </apex:pageBlock>
    </apex:form>  
 </apex:page>

All Answers

Rupal KumarRupal Kumar
Use Java Script..............

<apex:page controller="CheckboxRerenderController">

    <script>
        function hide(){
            if(document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.inputcheckbox1}').checked==true){
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='None';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='None';
                
            }
            else{
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='inline';
                 document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='inline';
                document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='inline';
            }
        }
    </script>


    <apex:form id="theform">    
        <apex:pageBlock id="thepageBlock">
          <apex:outputLabel value="Option1" id="outputLabel01" />
            <apex:pageblocksection id="pageblocksection">
                <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox1" onclick="hide();"/>    
                <apex:outputLabel value="I am a sole practitioner" id="outputLabel1"/>
                </apex:pageblocksection>
                
                 <apex:outputLabel value="Option2"  id="outputLabel02"/>
                 <apex:pageblocksection id="pageblocksection1">
                <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox2"/>    
                <apex:outputLabel value="I am employed by a corporation or partnership" id="outputLabel2"/>
                </apex:pageblocksection>
                
                 <apex:outputLabel value="Option3"  id="outputLabel03" />
                 <apex:pageblocksection id="pageblocksection2">
                  <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox3"/>    
                <apex:outputLabel value="Please enter your Employer's Name" id="outputLabel3"/>
                </apex:pageblocksection>
                
                  <apex:outputLabel value="Option4"  id="outputLabel04" />
                 <apex:pageblocksection id="pageblocksection3">
                <apex:inputcheckbox value="{!chkBx}"  id="inputcheckbox4"/>    
                <apex:outputLabel value="I am employed by a Commonwealth/State/Local Government" id="outputLabel4"/>
            </apex:pageblocksection>
         </apex:pageBlock>
    </apex:form>  
 </apex:page>
This was selected as the best answer
Vandana Rattan 4Vandana Rattan 4
Thanks Rupal. A little bit of code rework and your suggestion did the trick.

Regards,
Vandana