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

这是代码

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 回答