How can I show a different Dropdown based on checked box?

Question

I have a bunck of checkbox items, one of which is called nocalls and a couple of dropdownlist boxes.

Below are the dropdown boxes:

<tr>
                                        <td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</font></B></FONT></td>
                                        <td>
                                        <asp:dropdownlist id="eProfile" runat="server" Width="144px">
                                                <asp:listitem Value="" Selected="True">--Select A Profile--</asp:listitem>
                                                <asp:listitem Value="Add Profile">Add Profile</asp:listitem>
                                                <asp:listitem Value="Delete Profile">Delete Profile</asp:listitem>
                                                <asp:listitem Value="Update Profile">Update Profile</asp:listitem>
                                                <asp:listitem Value="Transfer">Transfer</asp:listitem>
                                                <asp:listitem Value="See Notes">See Notes</asp:listitem>
                                            </asp:dropdownlist>
                                      </td>
                                    </tr>
                                    <TR>
                                        <td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</font></B></FONT></td>
                                        <td>
                                        <asp:dropdownlist id="kProfile" runat="server" Width="144px">
                                                <asp:listitem Value="" Selected="True">--Select A Profile--</asp:listitem>
                                                <asp:listitem Value="Add Manager Profile">Add Manager Profile</asp:listitem>
                                                <asp:listitem Value="Add User Profile">Add User Profile</asp:listitem>
                                                                    </asp:dropdownlist>
                                      </td>
                                    </TR>

And below is the checkbox list

                                            <input id="CheckBox9" runat="server" type="checkbox" value="Notary" />Notary
                                                <input id="CheckBox10" runat="server" type="checkbox" value="VPN"  />VPN
                                                <input id="CheckBox11" runat="server" type="checkbox" value="VPSPagecenter"  />VPS-Pagecenter
                                                <input id="CheckBox12" runat="server" type="checkbox" value="PCDOC"  />PC DOC
                                            <input id="CheckBox13" runat="server" type="checkbox" value="nocalls" />nocalls

If the user checks the nocalls checkbox, we would like to display only the kProfile dropdown while hiding the eProfile dropdown.

If the user clicks one or more checkboxes but not the nocalls checkbox, the kProfile dropdwn is hidden while the eProfile dropdown is displayed.

I tried using Javascript to do this but I keep seeing the 2 dropdowns.

I know I am doing something really stupid.

if (theForm.service.value.indexOf("nocalls") >= 0) {

    var kprofobj = document.getElementById("kProfile");
    var eprofobj = document.getElementById("eProfile");

        kprofobj.style.visiblilty = "visible";
        eprofobj.style.visiblilty = "hidden";
        kprofobj.style.display = "block";

}



<script type="text/javascript"> 
   $(document).ready(function () {
    if ($('#nocalls').attr('checked')) { 
        $('#eProfile').hide(); 
        $('#kProfile').show() 
    }; 
    });
</script>

Answer 1

For a checkbox, don't look for the value, look for the CHECKED attribute.

if (theForm.service.checked)

not:

if (theForm.service.value.indexOf("nocalls") >= 0) 

PS table-based layouts and inline styling are evil.

PPS .NET comes with jQuery, allowing you to do $('#kProfile').hide() / $('#kProfile').show() without all that other JS code.