I have a checkbox on my VF page, with the label in a <TD> element of the table, and the checkbox in a <TD> element next to it like this:

       <td class="LeftColumnTop W50" title="{!$ObjectType.Request_for_System_Change__c.fields.BOC_dormant_account__c.inlineHelpText}"
        <font class="MainPanelFont">
                <apex:outputLabel value="{!$ObjectType.Request_for_System_Change__c.fields.BOC_dormant_account__c.Label}"/>
                <apex:actionFunction name="onclick" action="checkIt('inMailshot_BOC_dormant_account__c')"/>
        <td class="RightColumnTop W50" title="{!$ObjectType.Request_for_System_Change__c.fields.BOC_dormant_account__c.inlineHelpText}">                                                                    
            <div class="Mandatory">
                <apex:inputCheckbox styleClass="MainPanelFont"

For extra usability I'd like to have a click event on the <apex:outputLabel value or the <TD> container that will toggle the Checked/unchecked state of the checkbox. This will enable the user to just click the label for the checkbox to change it's value...

I have this method in a <SCRIPT> tag on the page:

function checkIt(string elementId){
    alert("checkIt" + elementId);
    if (document.getElementById(elementId).checked==true){
    }else {

but unfortunately, even though it compiles and saves ok, the event is not being raised (no alert or anything)

What is the correct way to do this in a VF page?

1 Answer 1


Simple way use for attribute of apex:ouputlabel and pass the id

<apex:outputLabel value="Checkbox" for="theCheckbox"/>
<apex:inputCheckbox value="{!inputValue}" id="theCheckbox"/>

Let me know if this solved your problem or not

  • another DOH moment, I used to use this in my classic ASP and DMTL DOM all the time...thanks! Jan 27, 2016 at 12:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .