+ Start a Discussion
John Neilan 2John Neilan 2 

Checkbox Field Checked Upon Radio Button Selection

Hello,

I have a VF page at the Account level.  The page includes 3 radio buttons.  I am trying to populate 1 of 3 checkbox fields on the Account depending upon the value the user selects in the radio buttons.  I have my page set up to render sections basd upon the radio button selected, and that works great.  However, I cannot figure out how to populate the appropriate checkbox field when the specific radio button is selected.  Can anyone help?
 
<apex:page standardController="Account" tabStyle="Account" id="thePage">

<script>
    function TypeSelect(variable)
    {
        var choice = variable.value;
        if(choice == 'Amp'){
            document.getElementById('layoutAmp').style.display = 'block';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!$Component.thePage.theForm.AmpVal}').value = true;
        }
        else if(choice == 'Eng'){
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementById('{!$Component.thePage.theForm.EngVal}').value = true;
        }
        else{
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('{!$Component.thePage.theForm.geVal}').value = true';
        }
    }   
</script>

<style>
    input[type=radio] {margin-left: 100px;}
    .radioClass {margin-left: 25%;}
</style>


<apex:form id="theForm">
    <apex:actionRegion >
        <div class="sectBody">
            <Table width="90%" border="0" cellpadding="0" cellspacing="0" columns="5">
                 <tr>
                     <td colspan="5" class="fieldLabel">
                     <apex:selectRadio layout="lineDirection" styleClass="radioClass" onclick="TypeSelect(this);">
                      <apex:selectOption itemLabel="Amp" itemValue="Amp"></apex:selectOption>
                            <apex:selectOption itemLabel="Eng" itemValue="Eng"></apex:selectOption>
                            <apex:selectOption itemLabel="Age" itemValue="Age"></apex:selectOption>
                     </apex:selectRadio>
                     <apex:actionSupport event="onchange" reRender="checkBox"/>
               </td>
          </tr>\    
     </Table><br/><br/>
        </div>


	<div id="checkBox">
    	<apex:inputField id="AmpVal" value="{!Account.Amp_Account__c}" />
    	<apex:inputField id="EngVal" value="{!Account.Eng_Account__c}" />
        <apex:inputField id="AgeVal" value="{!Account.Age_Account__c}" />
    </div>

 
AshlekhAshlekh
Hi,

Use below code.
 
<apex:page standardController="Account" tabStyle="Account" id="thePage">

<script>
    function TypeSelect(variable)
    {
        var choice = variable.value;
        if(choice == 'Amp'){
            document.getElementById('layoutAmp').style.display = 'block';
            document.getElementById('layoutEng').style.display = 'none';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementsByClassName('Amp').checked = true;
        }
        else if(choice == 'Eng'){
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementById('layoutAge').style.display = 'none';
            document.getElementsByClassName('Eng').checked = true;
        }
        else{
            document.getElementById('layoutAmp').style.display = 'none';
            document.getElementById('layoutEng').style.display = 'block';
            document.getElementsByClassName('AgeVal').checked = true;
        }
    }   
</script>

<style>
    input[type=radio] {margin-left: 100px;}
    .radioClass {margin-left: 25%;}
</style>


<apex:form id="theForm">
    <apex:actionRegion >
        <div class="sectBody">
            <Table width="90%" border="0" cellpadding="0" cellspacing="0" columns="5">
                 <tr>
                     <td colspan="5" class="fieldLabel">
                     <apex:selectRadio layout="lineDirection" styleClass="radioClass" onclick="TypeSelect(this);">
                      <apex:selectOption itemLabel="Amp" itemValue="Amp"></apex:selectOption>
                            <apex:selectOption itemLabel="Eng" itemValue="Eng"></apex:selectOption>
                            <apex:selectOption itemLabel="Age" itemValue="Age"></apex:selectOption>
                     </apex:selectRadio>
                     <apex:actionSupport event="onchange" reRender="checkBox"/>
               </td>
          </tr>\    
     </Table><br/><br/>
        </div>


	<div id="checkBox">
    	<apex:inputField styleclass='AmpVal'  id="AmpVal" value="{!Account.Amp_Account__c}" />
    	<apex:inputField styleclass='EngVal' id="EngVal" value="{!Account.Eng_Account__c}" />
        <apex:inputField styleclass='AgeVal' id="AgeVal" value="{!Account.Age_Account__c}" />
    </div>

-thanks
Ashlekh Gera
John Neilan 2John Neilan 2
Thanks.  I tried the code but it's still not changing the fields on my VF form in the "checkBox" div tag, or changing the values of those fields to "checked" in the Account I create.  Any idea why?
Roopali AgarwalRoopali Agarwal
can you please share the screen how's it look like bcoz after writing the code it simply showing three checkboxes and three radio button but nothing is happening while selecting buttons