Making a checkbox field value null using a JS function

Question

I am trying to set the value of a checkbox(custom field) to null in a VF page using Javascript function.Below are bits and pieces of my code. This happens when the user clicks the tag. An Onclick JS function is called which used the DOM to make the checkbox as null.

Problem :- the check box value is made as null however on the UI it still shows as checked but the text box shows empty immediately when I click Apex Image. The alert message in my JS function shows the Value is 1 for check box. I put that to make sure I get the correct DOM path of the checkbox.

<script>
resetInfoDOM(){
    alert('Before resetInfoDOM ' + document.getElementById("{!$Component.thePage:editForm:editFormBlock:someoutputpanel:pagesectionID3:checboxId}").value); // 1
    document.getElementById("{!$Component.thePage:editForm:editFormBlock:someoutputpanel:someoutputpanel:pagesectionID3:checboxId}").value=null;
    alert('After resetInfoDOM ' + document.getElementById("{!$Component.thePage:editForm:editFormBlock:someoutputpanel:pagesectionID3:checboxId}").value); // shows blank
    document.getElementById("thePage:editForm:editFormBlock:someoutputpanel:pagesectionID2:textId").value=null;
}
</script>

Part of the VF page:

<apex:pageBlockSectionItem id="pagesectionID1">
    <apex:outputLabel value="{!$ObjectType.fields.Afield.Label}" />
        <apex:actionRegion>
        <span class="lookupInput">
        <div class="requiredInput">
        <div class="requiredBlock"></div>
        <apex:inputText id="Alookup"  value="{!productCode}" rendered="{!FMP != true}" title="{!$Label.Afield}" label="{!$Label.Afield}" required="true">
        <apex:actionSupport event="onchange" reRender="someoutputpanel" action="{!callAFunction}" status="loadStatus"/>
        </apex:inputText>
        <apex:selectList value="{!var}" size="1" rendered="{!FMP == true}">
        <apex:selectOptions value="{!optionSome}"/>
        <apex:actionSupport event="onchange" reRender="someoutputpanel" action="{!someCode}" status="loadStatus" oncomplete="callOncomplete()"/>
        </apex:selectList>
        <apex:image id="closeIcon" onclick="resetInfoDOM();" value="/s.gif" alt="Clear" styleclass="closeIcon" rendered="{!productCode != null && FMP != true}"/>
        <a href="#" onclick="openLookupPopup('{!$Component.firstLookup}', '{!$Component.pName}','{!$Component.FName}'); return false">
        <apex:image id="lookupIcon" value="/a.gif" alt="New Window" styleclass="lookupIcon"  onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" title="{!$Label.ALabel}"/>
        </a>
        </div>
        </span>
        </apex:actionRegion>
</apex:pageBlockSectionItem>

Below section is in an OutputPanel. DOM path is thePage:editForm:editFormBlock:someoutputpanel.

<apex:outputPanel id="someoutputpanel">
    <apex:pageBlockSectionItem id="pagesectionID2">
        <apex:outputLabel value="{!$objecttype.Afield2.label}"/>
        <apex:actionRegion >
        <apex:inputField value="{!objvar.Afield2}" id="textId"/>
        </apex:actionRegion>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem id="pagesectionID3">
        <apex:outputLabel value="{!$objecttype.Afield3.label}"/>
        <apex:actionRegion >
        <apex:inputField value="{!objvar.Afield3}" id="checboxId"/>
        </apex:actionRegion>
    </apex:pageBlockSectionItem>
</apex:outputPanel>

When I click the , the text field and Check box needs to become null in the UI. However I see that Only text becomes empty and Checkbox does not. I tried to replicate the same in my Developer edition to see if there is something wrong with Check box. So I created below VF page to reproduce the error.

<apex:page id="thepage" standardController="Opportunity" extensions="OpportunityExt">  
 <apex:form id="theform"> 
        <script type="text/javascript">
        function initialize(){ 
        document.getElementById("thepage:theform:atextId").value=null;
        document.getElementById("thepage:theform:closedcheckboxId").value=null;
        }
        </script> 

          <apex:outputPanel id="inputId">
          <apex:commandbutton id="saveBtn" onclick="initialize();" value="Search" />
          </apex:outputPanel>
          <apex:outputPanel id="outputId">
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.IsClosed__c.label}"/> 
             <apex:actionRegion >
               <apex:inputField value="{!Opportunity.IsClosed__c}" id="closedcheckboxId"/> 
             </apex:actionRegion> 
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.OrderNumber__c.label}"/> 
             <apex:actionRegion >
               <apex:inputField value="{!Opportunity.OrderNumber__c}" id="atextId"/> 
             </apex:actionRegion>                          
          </apex:outputPanel>
          <apex:outputPanel id="outputId2">
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.TrackingNumber__c.label}"/> 
               <apex:inputField value="{!Opportunity.TrackingNumber__c}" id="trackingId"/>                        
          </apex:outputPanel>
  </apex:form> 
</apex:page>

This worked!!. But I noticed something. When I click the button the text disappeared immediately and checkbox was unchecked only after the page go refreshed. In my VF page, the page does not get refreshed and I thing that could be an issue. I do not have an option to refresh the whole page again in my problematic VF page(not the above one from DEV org)

What I am trying to understand is how it works differently for a check box and text field. Any insights of what I could be missing is highly appreciated.

Answer 1

Checkboxes have a "value", but that's the value submitted to the server (it default to "on" when checked, and nothing otherwise), but to actually modify its checked state, you need to use checked:

    document.getElementById("thepage:theform:closedcheckboxId").checked = false;

See <input type="checkbox" /> for more details on how checkboxes work.