Change an object visibility with javascript using a checkbox?

i'm really sorry if this question have been asked before but I couldn't find it.

Working on a ASP.NET/C# web application.

i am cr开发者_StackOverflow中文版eating a label in the code behind and adding it to the page (all coded in the code behind and not in design page)

Now I have a check-box I want to change the visibility of the label depending if the checkbox is checked (show) or if not (hide).

I tried to use an update panel. But since the label is generated in code I have to generate it again everytime there is a partial postback. and I don't want that.

Is there a way to do this with javascript to avoid post-backs? other solutions are also appreciated.

Thank you very much for any help

---

Put this code in the page Load.

if (!Page.IsPostBack) {
    Label lbl = new Label();
    lbl.ID = "lbl";
    lbl.Text = "Test";
    this.Controls.Add(lbl); 

Add the reference to the jQuery javascript and place it as HTML below.

<asp:CheckBox runat="server" ID="chk" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#chk").change(function () {
            if (this.checked)
                $("#lbl").hide();
            else
                $("#lbl").show();
        });
    });
</script>

Try to use AJAX (jQuery) in case you need to create dynamic controls.

---

You are on the right track. You can avoid the overhead and complexity of using UpdatePanel controls and an AJAX call by using client-side script to do this instead.

You'll want to define a JavaScript function to fire for the onClick event of the checkbox on your web page:

<input type="checkbox" onclick="checkboxChanged(this);" />

I'll assume you're adding a label with ID "lbl" to the page from your code-behind. Make sure you make the label a Protected member of the Page class so you can access it from the aspx page using a server tag to retrieve the correct ID for when you call document.getElementById in JavaScript. This is important.

Partial Class MyPage
  Inherits System.Web.UI.Page
  Protected lbl As Label

  Private Sub Page_Load(sender As Object, e As EventArgs)

    If Not Page.IsPostback Then

      lbl = New Label()
      lbl.ID = "lbl"
      Me.Controls.Add(lbl)

    End If

  End Sub

End Class

So here's what your JavaScript code on your aspx page will look like:

function checkboxChanged(checkbox) {
  if (checkbox.checked) {
    document.getElementById("<%=Me.lbl.ClientID %>").style.display = 'inline';
  } else {
    document.getElementById("<%=Me.lbl.ClientID %>").style.display = 'none';
  }
}

---

<asp:CheckBox ID="CheckBox1" onclick='$("span[id$=lblToHide]").toggle();' runat="server" Text="Bla" AutoPostBack="false" />   

if (!Page.IsPostBack) {
    Label lbl = new Label();
    lbl.ID = "lblToHide";       
    lbl.Text = "I am visible";
    lbl.Attributes.Add("style", "display:none"); //hide at first
    this.Controls.Add(lbl); //or however you are adding it
}

---

Why don't you want to load the label control on every postback? With ASP.NET the entire page gets loaded with EACH postback and the view state is reloaded into the control. You can then on page init event create the label control each time and it's viewstate visible property in this case would be kept between postbacks.