I have the following javascript function that I want to call on the check or uncheck of a checkbox:

    <script language="javascript" type="text/javascript">
    function showHideDropDowns() {
        var check = document.getElementById('<%= cbShowHideDDLs %>')
        if (check.checked) {
            document.getElementById('<%=ddlVendor%>').style.visibility = 'visible';
            document.getElementById('<%=ddlItem%>').style.visibility = 'visible';
            document.getElementById('<%=ddlorigin%>').style.visibility = 'visible';

            document.getElementById('<%=tbVendor%>').style.visibility = 'hidden';
            document.getElementById('<%=tbItems%>').style.visibility = 'hidden';
            document.getElementById('<%=tbOrigin%>').style.visibility = 'hidden';

        }
        else {
            document.getElementById('<%=ddlVendor%>').style.visibility = 'hidden';
            document.getElementById('<%=ddlItem%>').style.visibility = 'hidden';
            document.getElementById('<%=ddlorigin%>').style.visibility = 'hidden';

            document.getElementById('<%=tbVendor%>').style.visibility = 'visible';
            document.getElementById('<%=tbItems%>').style.visibility = 'visible';
            document.getElementById('<%=tbOrigin%>').style.visibility = 'visible';
        }
    }
    </script>

Trying to add and attribute using OnCheckedChanged or OnClick has not worked:

    <asp:CheckBox ID="cbShowHideDDLs" runat="server" Text="Show Lists"  />


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            {
                cbShowHideDDLs.Attributes.Add("onclick", "showHideDropDowns();");
                //cbShowHideDDLs.Attributes.Add("OnCheckedChanged","showHideDropDowns();");
            }
    }

I have the following javascript function that I want to call on the check or uncheck of a checkbox:

    <script language="javascript" type="text/javascript">
    function showHideDropDowns() {
        var check = document.getElementById('<%= cbShowHideDDLs %>')
        if (check.checked) {
            document.getElementById('<%=ddlVendor%>').style.visibility = 'visible';
            document.getElementById('<%=ddlItem%>').style.visibility = 'visible';
            document.getElementById('<%=ddlorigin%>').style.visibility = 'visible';

            document.getElementById('<%=tbVendor%>').style.visibility = 'hidden';
            document.getElementById('<%=tbItems%>').style.visibility = 'hidden';
            document.getElementById('<%=tbOrigin%>').style.visibility = 'hidden';

        }
        else {
            document.getElementById('<%=ddlVendor%>').style.visibility = 'hidden';
            document.getElementById('<%=ddlItem%>').style.visibility = 'hidden';
            document.getElementById('<%=ddlorigin%>').style.visibility = 'hidden';

            document.getElementById('<%=tbVendor%>').style.visibility = 'visible';
            document.getElementById('<%=tbItems%>').style.visibility = 'visible';
            document.getElementById('<%=tbOrigin%>').style.visibility = 'visible';
        }
    }
    </script>

Trying to add and attribute using OnCheckedChanged or OnClick has not worked:

    <asp:CheckBox ID="cbShowHideDDLs" runat="server" Text="Show Lists"  />


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            {
                cbShowHideDDLs.Attributes.Add("onclick", "showHideDropDowns();");
                //cbShowHideDDLs.Attributes.Add("OnCheckedChanged","showHideDropDowns();");
            }
    }

• javascript
• asp

3 Answers 3

Try this:

<asp:CheckBox ID="cbShowHideDDLs" ... onclick="showHideDropDowns(checkbox)" />

If you want to get an UserControl element on the client side, you need to use its ClientID. So, changing your javascript function to :

<script language="javascript" type="text/javascript">
    function showHideDropDowns(checkbox) {
        if (checkbox.checked) {
        document.getElementById('<%=ddlVendor.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=ddlItem.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=ddlorigin.ClientID %>').style.visibility = 'visible';

        document.getElementById('<%=tbVendor.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=tbItems.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=tbOrigin.ClientID %>').style.visibility = 'hidden';
    }
    else {
        document.getElementById('<%=ddlVendor.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=ddlItem.ClientID %>').style.visibility = 'hidden';
        document.getElementById('<%=ddlorigin.ClientID %>').style.visibility = 'hidden';

        document.getElementById('<%=tbVendor.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=tbItems.ClientID %>').style.visibility = 'visible';
        document.getElementById('<%=tbOrigin.ClientID %>').style.visibility = 'visible';
        }
    }
</script>

try this

 cbShowHideDDLs.Attributes.Add("onclick", "javascript:showHideDropDowns();");

If you don't mind using jQuery, you can do like this:

<script src="Scripts/jquery-2.0.3.js"></script> <%-- Add jQuery reference --%>
<script type="text/javascript">
    $(document).ready(function () {
        $("input:checkbox[name$='cbShowHideDDLs']").click(function () {
            var defvisible = this.checked? 'hidden' : 'visible';
            var defhidden = this.checked ? 'visible' : 'hidden';

            $('#<%=ddlVendor.ClientID %>').css('visibility', defvisible);
            $('#<%=ddlItem.ClientID %>').css('visibility', defvisible);
            $('#<%=ddlorigin.ClientID %>').css('visibility', defvisible);

            $('#<%=tbVendor.ClientID %>').css('visibility', defhidden);
            $('#<%=tbItems.ClientID %>').css('visibility', defhidden);
            $('#<%=tbOrigin.ClientID %>').css('visibility', defhidden);

        });
    });
</script>

And there's no need to bind any function to onclick of the checkbox for this.