Handling OnCheckedChanged Checkbox Event with Javascript

Question

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();");
            }
    }

Mateus Schneiders · Accepted Answer · 2013-08-31 21:33:56Z

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>

edited Aug 31, 2013 at 21:33

answered Aug 31, 2013 at 14:49

Mateus Schneiders

4,9133 gold badges23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bsivel Over a year ago

Mt Schneiders - tried both of your suggestions and neither worked. Not sure what to try next.

bsivel Over a year ago

In IE I get JavaScript runtime error: Unable to get property 'checked' of undefined or null reference. Chrome doesn't raise an error.

Aarif Qureshi · Accepted Answer · 2013-09-03 05:43:33Z

1

try this

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

answered Sep 3, 2013 at 5:43

Aarif Qureshi

4741 gold badge3 silver badges13 bronze badges

Comments

marc_s · Accepted Answer · 2017-02-13 16:46:03Z

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.

Collectives™ on Stack Overflow

Handling OnCheckedChanged Checkbox Event with Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related