+ Start a Discussion
Darlene BlaneyDarlene Blaney 

how to detect checkbox checked/unchecked on visualforce page

I have a visualforce page where I select student type of freshman and display highschool information fields (that works fine).  But I want to hide the highschool country if the person checks the homeschooled checkbox.  I can't seem to get that to work. I am trying to use javascript to hide the fields.  Any help would be greatly appreciated.
vfp code:
<apex:page Controller="RFIForm" showHeader="false" standardStylesheets="FALSE">
<apex:includeScript value="{!$Resource.jQuery}"/>
<apex:composition template="{!$Site.Template}">
<apex:define name="body">
<script>
        
$(document).ready(function() {

    HSReRender();
});
    
function HSReRender(){
    var studentType = $("[id$=studentType]").val();
    var HomeSchooled = $("[id$=homeSchooled]").val();
    
    //$(".hsPanelH").hide();
    alert(HomeSchooled);
    if (studentType == "Freshman"){
        $(".highSchoolPanelH").show();
        if (HomeSchooled.checked){
        $(".hsPanelH").hide();
        alert('testing homeschooled checked');}
        else{
        $(".hsPanelH").show();
        alert('testing homeschooled not checked');}
        alert('testing freshman first');
    } else {
        $(".highSchoolPanelH").hide();
        $(".hsPanelH").hide();
        alert('testing freshman else first');
        }
    
    if ($(("#homeSchooled").is(":checked"))){
        //    if (studentType2 == "Freshman" && (HomeSchooled == null || HomeSchooled == false)){
        $(".hsPanelH").hide();
        alert('testing freshman and homeschooled checked');
    } else if (studentType == "Freshman"){
        $(".hsPanelH").show();
        alert('testing just freshman');
        } else {
           $(".hsPanelH").hide();
            alert('testing else');
        }
}
</script>
    <apex:pageMessages ></apex:pageMessages>
<apex:form Id="form">
    <h1 id="page-title">Request for Information </h1>
    <div style="width:100%">
        <p>
           <span class="contentText">Please enter your information in the fields below. When completed click on the <b>Submit</b> button at the bottom of page. Please allow 3 to 5 business days for processing your request for information.</span>
        </p>
        <p>
           <span class="contentText"><strong>* Indicates a required field.</strong></span>
        </p>
    </div>
    <table border="0" cellspacing="3" width="100%">
        <tbody>
            <tr>
                 <th colspan="2">Name and Personal Data</th>
            </tr> 
            <tr>
                <td width="37%"><apex:outputText styleclass="req" value="*Type of Student:"/></td>
                <td width="63%">
                    <apex:selectList id="studentType" value="{!studentType}" multiselect="false" size="1" styleClass="inputRequired" onchange="HSReRender();">
                        <apex:selectOptions value="{!studentTypeOptions}"/>
                        <apex:actionSupport event="onchange" rerender="highSchoolPanel"/> 
                    </apex:selectList>
                </td>
            </tr>
        </tbody>
    </table>
    <table border="0" cellspacing="3" width="100%">
        <tbody>
            <tr class="highSchoolPanelH">
                <th colspan="2" class="highSchoolPanelH">High School Information</th>
            </tr>
            <tr class="highSchoolPanelH">
                <td width="37%" class="highSchoolPanelH">Home Schooled</td>
                <td width="63%" class="highSchoolPanelH" onchange="HSReRender()">
                    <apex:inputCheckbox id="homeSchooled" value="{!interest.Home_Schooled__c}">
                    <apex:actionSupport event="onclick" rerender="highSchoolPanel"/>
                    </apex:inputCheckbox>
                </td>
            </tr>
                
            </tbody> 
        </table>
    <table border="0" cellspacing="3" width="100%" id="highSchoolPanel" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
        <tbody>
        <tr class="hsPanelH" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
            <apex:outputText>  
              <td width="37%" class="hsPanelH" >*High School Country</td>
            </apex:outputText>
              <td width="63%" class="hsPanelH" rendered="{!studentType=='Freshman' && (interest.Home_Schooled__c==null || interest.Home_Schooled__c==false)}">
                  <apex:selectList id="hsPanelH" value="{!hscountry}" multiselect="False" size="1" styleClass="inputRequired">
                     <apex:selectOptions value="{!CountryOptions}"/>
                     <apex:actionSupport event="onchange" action="{!getHsStateRequired}" />
                  </apex:selectList>
              </td>
            </tr>
            </tbody>
        </table>
</apex:form>
</apex:define>
</apex:composition>
</apex:page> 
Andrew EchevarriaAndrew Echevarria
Can you try using the onclick attribute rather than actionSupport? Like below
<apex:inputCheckbox onclick="myfunction" />
<apex:actionfunction name="myfunction" rerender="mypanel" />

 
Darlene BlaneyDarlene Blaney
Hi Andrew,

This is what I changed my code to:
<apex:inputCheckbox id="homeSchooled" value="{!interest.Home_Schooled__c}" onclick="HSReRender()">
<apex:actionFunction name="HSReRender()" rerender="highSchoolPanel"/>
</apex:inputCheckbox>

It did not solve my problem.  'homeSchooled' is showing as undefined.  Is there a special way that I need to evaluate 'homeSchooled' to see that it is checked?
Andrew EchevarriaAndrew Echevarria
Replace what you wrote with this. Essentially, remove the function from inside the checkbox, and don't name the action function with ()
<apex:inputCheckbox id="homeSchooled" value="{!interest.Home_Schooled__c}" onclick="HSReRender()" />
<apex:actionFunction name="HSReRender" rerender="highSchoolPanel"/>