Question

我有一个radiobutton列表。

<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实现这个目标？

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

Answer 2

这是代码

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

RadioButtonList用于更改表的可见性

2 个答案: