get value of apex:inputCheckbox in jQuery

Question

I am trying to use a apex:inputCheckbox and pass the value (if it is checked) to a JS function.

I have tried everything from onClick, toggling, event listeners, .checked, this question , and pretty much everything other then actionStatus because I wanted to keep it in the javascript/jQuery.

Is there a way to have an event listener to listen for the inputCheckbox and to retain the value of true or false if it is checked? Or is it impossible because I am tryign to merge visualforce with jQuery?

<apex:form >
    <apex:pageBlock title="Convert Lead" id="ConvertLeadBlock" mode="edit">
        <apex:pageBlockButtons >
            <apex:commandButton value="Convert" action="{!doConvert}"/>
            <apex:commandButton value="Cancel" action="{!Cancel}"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem >
                <apex:outputLabel value="Create Opportunity?"/>
                    <apex:inputCheckbox value="{!objLead.CreateConvertedOppty__c}" id="checkbox"/>
                </apex:pageBlockSectionItem>
            <!--only display this section if the value of inputCheckbox == true-->
            <apex:outputPanel styleClass="opptyRecType">
                <apex:pageBlockSectionItem>
                    <apex:outputLabel id="lblOppRecType" value="Opportunity Record Type"/>
                    <apex:selectList id="ddlOppRecType" size="1" multiselect="False" value="{!objRecType}">
                        <apex:selectOptions value="{!OpportunityRecordType}" />
                    </apex:selectList>
                </apex:pageBlockSectionItem>
            </apex:outputPanel>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

When I attempt: var x = document.getElementById('checkbox').checked;

I am returned: Uncaught TypeError: Cannot read property 'checked' of null, so I put the inputcheckbox inside of a div with the id, and I get "undefined" returned

Answer 1

Visualforce puts automatic stuff on the front of the id of your elements to make sure that they are unique (e.g. when you use them inside an <apex:repeat>). So, you can't just select by the id checkbox.

You need something a bit more like this:

var x = $('[id$=checkbox]').is(':checked');

This finds an id ending in checkbox and ignores all the automatic stuff.