[SalesForce] Making a checkbox field value null using a JS function

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.