Hiding text box based on check box checking

Question

Hello,
I have a jsp in which based on whether the check box is checked or unchecked I want to hide or show a text box. I am including the text box in a div tag & calling a javascript function to set the style of the div to hidden or shown based on whether the check box is checked or not. although i am getting the correct values in the alerts the text box is not getting hidden.
   <td class="label"><label for="chk1"><gbms:message key="lblSearchforDeletedCustomer"/>:</label></td><td class="input">
              <html-el:checkbox property="chk1" value="N" tabindex="3" onclick="javascript:checkboxClicked(document.forms['formCustomerOrVehicleMaintenance'])" onfocus="fnShowError(document.formCustomerOrVehicleMaintenance.chk1);"></html-el:checkbox> <gbms:message key="chek"/> 
                             </td>
                             <div id="delDateDiv" style:hidden>
                        <td class="label"><label for="txtDeleteDate"><gbms:message key="lblDeletedAsOf"/>:</label></td><td class="input">
             <html-el:text property="txtDeleteDate" size="6" maxlength="40" tabindex="3" onchange="fnChanged()" onfocus="fnShowError(document.formCustomerVehicleMaintenanceDelete.txtDeleteDate);"></html-el:text> <a href="#" onclick="cal1xx.select(document.forms[0].txtDeleteDate,'anchor1xx','MMddyy'); return false;" name="anchor1xx"><img src="<%=request.getContextPath()%>/css/common/calendar.gif" border="0" style="cursor: hand"></a><gbms:help jsp="customerVehicleMaintenanceDelete" module="admin" languageCode="<%=request.getLocale().getLanguage()%>" field="DeletedAsOf"/>
                    </td></div>javascript function being called..
function checkboxClicked(aThis)
                    var aform = document.forms['formCustomerOrVehicleMaintenance'];
                    var aDiv = document.getElementById('delDateDiv');
                    alert(aDiv.style.visibility);
                    alert(aDiv.innerHTML);
                    alert(aform.chk1.checked);
                    if(aThis.chk1.value == true)
                         aform.txtDeleteDate.value = '';
                         aform.txtDeleteDate.disabled = false;
                         aDiv.style.visibility = 'visible';
                    else
                         aform.txtDeleteDate.value = '';
                         aform.txtDeleteDate.disabled = true;
                         aDiv.style.visibility = 'hidden';
               }

Answer 1

in my javascript function the value returned is true when checkbox is checked & false when it is unchecked. visibility is also giving correct value in the alert. but still field is not hiding
          function checkboxClicked()
                    var aform = document.forms['formCustomerOrVehicleMaintenance'];
                    var aDiv = document.getElementById('delDateDiv');
                    alert(aDiv.style.visibility);
                    alert(aform.chk1.checked);
                    if(aform.chk1.checked)
                         aform.txtDeleteDate.value = '';
                         aform.txtDeleteDate.disabled = false;
                         aDiv.style.visibility = 'visible';
                         alert("inside if");
                         alert(aDiv.style.visibility);
                    else
                         aform.txtDeleteDate.value = '';
                         aform.txtDeleteDate.disabled = true;
                         aDiv.style.visibility = 'hidden';
                         alert("inside else");
                         alert(aDiv.style.visibility);
               }