在javascript中使用复选框更改对象可见性

本文关键字：对象 可见性 复选框 javascript | 更新日期: 2023-09-27 18:11:25

我很抱歉，如果这个问题之前已经问过了，但我找不到它。

使用ASP。. net/c# web应用程序。

我在后面的代码创建一个标签，并将其添加到页面(所有编码在后面的代码，而不是在设计页)

现在我有一个复选框，我想改变标签的可见性取决于复选框是否被选中(显示)或如果没有(隐藏)。

我尝试使用更新面板。但是，由于标签是在代码中生成的，每次有部分回发时，我都必须再次生成它。我不希望那样。

是否有一种方法可以用javascript来避免回发?其他解决方案也值得赞赏。

非常感谢您的帮助

在javascript中使用复选框更改对象可见性

将此代码放入页面Load.

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

将引用添加到jQuery javascript中，并将其作为HTML放在下面。

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

如果需要创建动态控件，请尝试使用AJAX (jQuery)。

你做对了。您可以通过使用客户端脚本来避免使用UpdatePanel控件和AJAX调用的开销和复杂性。

你需要定义一个JavaScript函数来触发你的网页上的复选框的onClick事件:

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

我将假设您从代码后端向页面添加了一个ID为"lbl"的标签。确保使标签成为Page类的Protected成员，这样您就可以使用服务器标记从aspx页面访问它，以便在调用document时检索正确的ID。JavaScript中的getElementById。这很重要。

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
这就是你的aspx页面上的JavaScript代码的样子: 
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
}

为什么不想在每次回发时加载标签控件呢?ASP。每次回发都会加载整个页面，并将视图状态重新加载到控件中。然后，您可以在页面初始化事件中每次创建标签控件，并且在这种情况下，它的viewstate可见属性将在回发之间保留。

相关文章：