Handling OnCheckedChanged Checkbox Event Using Javascript

Question

I have the following javascript function that I want to call or uncheck:

<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> 

Attempting to add and attribute using OnCheckedChanged or OnClick does not work:

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

Answer 1

Try the following:

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

If you want to get the UserControl element on the client side, you need to use its ClientID. So, changing the 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> 

Answer 2

try it

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

Answer 3

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 is no need to bind any function to onclick this flag.