Toggle two controls (on click of a checkbox) not working properly...any help?

JavaScript
1

Hello folks,

I have three asp controls. Textbox, dropdownbox contro and a checkbox control.

When the form loads (the dropdown box gets loaded from database), I want only text box to be visible and dropdown box should be invisible.
And when the user checks the checkbox control, the text box should become hidden and dropdown to be visible. This works only if I keep the dropdownbox visible. If I keep it hidden during form load it doesn’t work.

Please see the code that is working now.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:DropDownList ID="DropDownList1" runat="server" Visible="true">
        </asp:DropDownList>
        <asp:CheckBox ID="CheckBox1" runat="server" Onclick="toggleVisibility();"  />

    </div>
    </form>

    <script language="javascript" type="text/javascript">

        function toggleVisibility(controlId, controlID2)
        {
            var control = document.getElementById(controlId);

            var controldropdownbox = document.getElementById(controlID2);

            if (control.style.visibility == "visible" || control.style.visibility == "") {
                control.style.visibility = "hidden";
                controldropdownbox.value = "1";
                controldropdownbox.style.visibility = "visible";
            }

            else {
                control.style.visibility = "visible";
                controldropdownbox.style.visibility = "hidden";
            }



       }
    </script>
</body>
</html>