0

ラジオボタンのリストがあります。

<asp:RadioButtonList ID="ChangeVisibilityRadioButtonList" runat="server"
 TextAlign="Right" RepeatDirection="Horizontal" CssClass="cb">
</asp:RadioButtonList>

コード部分では、

        ChangeVisibilityRadioButtonList.Items.Add(new ListItem("Visible", "visible"));
        ChangeVisibilityRadioButtonList.Items.Add(new ListItem("Hidden", "hidden"));
        ChangeVisibilityRadioButtonList.SelectedIndex = 0;

これが私のテーブルです

<table align="center" runat="server" id="OdemeTable" visible="false">
     <tr>
          <td>
              Hello world!
          </td>
     </tr>
</table>

RadioButtonList から可視オプションを選択すると、OdemeTable が動的に表示されますが、RadioButtonList から非表示のオプションを選択すると、OdemeTable は表示されなくなります。javascriptでこれを達成するにはどうすればよいですか?

4

2 に答える 2

1

jQueryを使用できます：

<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>

<form id="form1" runat="server">
     <script type="text/javascript">
        $(document).ready(function () {
            $('#ChangeVisibilityRadioButtonList').click(function () {
                if ($("#ChangeVisibilityRadioButtonList input:radio:checked").val() == 'hidden') {
                    document.getElementById('OdemeTable').style.display = "none";
                }
                else {
                    document.getElementById('OdemeTable').style.display = "";
                }
            });
        }); 
    </script>


    <asp:RadioButtonList ID="ChangeVisibilityRadioButtonList" runat="server"
        TextAlign="Right" RepeatDirection="Horizontal" CssClass="cb">
        <asp:ListItem Text="Visible" Value="visible"></asp:ListItem>
        <asp:ListItem Text="Hidden" Value="hidden"></asp:ListItem>
    </asp:RadioButtonList>
    <table align="center" id="OdemeTable" style="display:none" >
     <tr>
          <td>
              Hello world!
          </td>
     </tr>
    </table>    
</form>

Visible=falseクライアント側ではまったくレンダリングされないことを意味するため、デフォルトではサーバー側でテーブルを作成しないでください。そのため、それを表示することはできません。そのため、使用しstyle="display:none"ました。

于 2012-06-04T10:40:48.613 に答える
0

Here's the code

Javascript

function HideTable() {
            var RB1 = document.getElementById("<%=ChangeVisibilityRadioButtonList.ClientID%>");
            var radio = RB1.getElementsByTagName("input");

            var tbl = document.getElementById("<%=OdemeTable.ClientID%>");

            var selval;

            for (var i = 0; i < radio.length; i++) {
                if (radio[i].checked) {
                    selval = radio[i].value; 
                }
            }

            if (selval == 'Visible') {
                document.getElementById("<%=OdemeTable.ClientID%>").style.display = '';
            }
            else {
                document.getElementById("<%=OdemeTable.ClientID%>").style.display = 'none';
            }

        }

ASPX

<asp:RadioButtonList ID="ChangeVisibilityRadioButtonList" runat="server" onchange="HideTable();" TextAlign="Right"
                    RepeatDirection="Horizontal" >
                    <asp:ListItem Value="Visible" Text="Visible"></asp:ListItem>
                    <asp:ListItem Value="Hidden" Text="Hidden"></asp:ListItem>
                </asp:RadioButtonList>
                <table align="center" runat="server" id="OdemeTable">
                    <tr>
                        <td>
                            <b>Hello world!</b>
                        </td>
                    </tr>
                </table>
于 2012-06-04T10:59:19.920 に答える