ASP.net скрытие панели с использованием JavaScript

Question

У меня есть radioButtonList с двумя элементами. Радиокнопка со значением «Да» и радионавигация со значением «Нет».

Ниже, у меня есть панель, которую я хочу сделать видимой, когда радио-кнопка «Да» выбрана, и скрыта, когда выбрано «Нет». Первоначально я реализовал это с помощью атрибута 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
    }

Заранее спасибо,

1008 * хочет подарить Петербургу *

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

Answer 2

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


</script>

Раджа В вашем коде есть какая-то ошибка, я ее только что удалил

Answer 3

если вы не возражаете против частичной обратной передачи, вы также можете добавить свой код в UpdatePanel (при условии, что вы не хотите выполнять обратную передачу, чтобы вся страница не проходила жизнь страницы). -цикл).

Answer 4

попробуйте это:

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

Надеюсь, это поможет.

Answer 5

Если вы добавляете класс или определяете реальный идентификатор «panel1», вы можете использовать jQuery, чтобы легко его скрыть:

$('idOfPanel').hide();

Или вы не используете jQuery, используя идентификатор панели / div:

idOfPanel.style.display = "none";

Для повторного отображения:

$('idOfPanel').show();

или

idOfPanel.style.display = "block";