使用 javascript 的 ASP.net 隐藏面板

发布于 2024-08-24 17:43:55 字数 593 浏览 8 评论 0原文

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

下面有一个面板,我希望在选择“是”单选按钮时使其可见,在选择“否”时隐藏该面板。我最初是使用 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
    }

预先感谢,

扎普斯

I have a radioButtonList with 2 items in it. A radiobutton with a "Yes" value and a radionButton with a "No" value.

Below that I have a panel which I want made visible when "Yes" radioButton is selected and hidden when "No" is selected. I had originally implemented this using the AutoPostBack attribute but I want to do it in Javascript so that it doesn't cause a postback. Here's the code. Any help would be greatly appreciated.

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

Thanks in advance,

Zaps

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

清风夜微凉 2024-08-31 17:43:55

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

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

Here is a quick example I made up:

<!-- 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>
淡笑忘祈一世凡恋 2024-08-31 17:43:55
    function OnclickPanelHide() {
        if (this.value == "No") {
            document.getElementByID('<%=panel1.ClientID%>').style.display = "none";
        }
        else {
            document.getElementByID('<%=panel1.ClientID%>').style.display = "block";
        }
    }


</script>

Raja 你的代码中有一些错误,我刚刚将其删除

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


</script>

Raja There is some bug in your code i just removed it

路还长,别太狂 2024-08-31 17:43:55

如果您添加一个类或确定“panel1”的真实 id,您可以使用 jQuery 轻松隐藏它:

$('idOfPanel').hide();

或者您不使用 jQuery,使用 div/panel 的 id:

idOfPanel.style.display = "none";

重新显示:

$('idOfPanel').show();

idOfPanel.style.display = "block";

If you add a class or determine the real id of "panel1", you can use jQuery to hide it easily:

$('idOfPanel').hide();

Or you without using jQuery, using the id of the div/panel:

idOfPanel.style.display = "none";

To redisplay:

$('idOfPanel').show();

Or

idOfPanel.style.display = "block";
淡墨 2024-08-31 17:43:55

试试这个:

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

希望有帮助。

try this:

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

Hope it helps.

眼眸里的快感 2024-08-31 17:43:55

如果您不介意进行部分回发,您还可以将代码放入 UpdatePanel 中(假设您不想回发,以便整个页面不必经过页面生命周期)。

if you don't mind doing a partial postback, you can also throw your code into an UpdatePanel (assuming that you don't want to postback so that the entire page doesn't have to go through a page life-cycle).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文