使用 javascript 的 ASP.net 隐藏面板答案

【问题标题】：ASP.net hiding panel using javascript使用 javascript 的 ASP.net 隐藏面板
【发布时间】：2011-01-26 21:02:07
【问题描述】：

我有一个带有 2 个项目的 radioButtonList。一个带有“是”值的单选按钮和一个带有“否”值的单选按钮。

下面，我有一个面板，我想要在选择“否”时选择并隐藏“是”radiobutton时可见的面板。我最初是使用 AutoPostBack 属性实现的，但我想在 Javascript 中执行它，这样它就不会导致回发。这是代码。任何帮助将不胜感激。

<asp:RadioButtonList ID="rbl1" runat="server" onClick="changed(this);" >
<asp:ListItem Value="Yes">Yes</asp:ListItem>
<asp:ListItem Value="No">No</asp:ListItem>

<asp:Panel ID="panel1" runat="server">
<--other controls here -->
</asp:Panel>

function changed(rbl) {
        //not sure what to put in here
    }

提前致谢，

电击

【问题讨论】：

标签： asp.net javascript panel radiobuttonlist

【解决方案1】：

这是我编的一个简单的例子：

<!-- Used grouped radio buttons instead of the RadioButtonList as it is harder to deal with -->
<asp:RadioButton ID="rbYes" runat="server" Text="Yes" GroupName="YourGroupName" Checked="true" />
<asp:RadioButton ID="rbNo" runat="server" Text="No" GroupName="YourGroupName" />        
<br /><br />    
<!-- Use a div instead of a panel.  Panels are just glorified divs. -->
<div id="divTest">
    This is a test
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#<%= rbYes.ClientID %>').click(function() { $('#divTest').show(); });
        $('#<%= rbNo.ClientID %>').click(function() { $('#divTest').hide(); });

    });
</script>

【讨论】：

【解决方案2】：

    function OnclickPanelHide() {
        if (this.value == "No") {
            document.getElementByID('<%=panel1.ClientID%>').style.display = "none";
        }
        else {
            document.getElementByID('<%=panel1.ClientID%>').style.display = "block";
        }
    }


</script>

Raja 你的代码中有一些错误我刚刚删除了它

【讨论】：

这应该是对 Raja 答案的评论或编辑。请仔细阅读：stackoverflow.com/help

【解决方案3】：

如果你添加一个类或者确定“panel1”的真实id，你可以使用jQuery轻松隐藏它：

$('idOfPanel').hide();

或者你不使用 jQuery，使用 div/panel 的 id：

idOfPanel.style.display = "none";

重新显示：

$('idOfPanel').show();

或者

idOfPanel.style.display = "block";

【讨论】：

【解决方案4】：

试试这个：

if (this.value == "No")
{
document.getElementByID('<%=panel1.ClientId%').style.display = "none";
}
else
{
document.getElementByID('<%=panel1.ClientId%').style.display = "block";
}

希望对你有帮助。

【讨论】：

【解决方案5】：

如果您不介意进行部分回发，您也可以将代码放入UpdatePanel（假设您不想回发，这样整个页面就不必经历一个页面生命周期-循环）。

【讨论】：