3

2 つの項目を含む radioButtonList があります。「はい」の値を持つラジオボタンと「いいえ」の値を持つradionButton。

その下には、「はい」ラジオボタンが選択されているときに表示され、「いいえ」が選択されているときに非表示にするパネルがあります。私はもともと 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
    }

前もって感謝します、

ザップス

4

5 に答える 5

3

これが私が作った簡単な例です：

<!-- 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>
于 2010-03-12T18:52:26.530 に答える
1 

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


</script>

Raja コードにバグがあり、削除しました

于 2014-02-06T05:38:38.247 に答える
0

部分的なポストバックを実行してもかまわない場合は、コードをUpdatePanel（ポストバックしたくないと仮定して、ページ全体がページのライフサイクルを通過する必要がないことを前提として）することもできます。

于 2010-03-12T19:16:21.397 に答える
0

これを試して：

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

それが役に立てば幸い。

于 2010-03-12T19:09:19.460 に答える
0

クラスを追加するか、「panel1」の実際の ID を特定する場合、jQuery を使用して簡単に非表示にすることができます。

$('idOfPanel').hide();

または、jQuery を使用せずに、div/panel の ID を使用します。

idOfPanel.style.display = "none";

再表示するには:

$('idOfPanel').show();

または

idOfPanel.style.display = "block";
于 2010-03-12T15:16:02.350 に答える