javascript - 根据选定的单选按钮显示面板

Question

我的页面上当前有以下代码:

<asp:RadioButtonList id="GroupButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="0" selected="true" />
    <asp:ListItem Value="1" />
    <asp:ListItem Value="2" />
    <asp:ListItem Value="3" />
    <asp:ListItem Value="4" />
    <asp:ListItem Value="5" />
    <asp:ListItem Value="6" />
    <asp:ListItem Value="7" />
</asp:RadioButtonList>
<asp:Panel ID="GroupPanel" runat="server">
    <b>How can we improve our service?</b><br />
    <asp:TextBox ID="GroupTextBox" runat="server" />
</asp:Panel>

此代码也在不同部分中重复(IndividualButtons/IndividualPanel、EducationButtons/EducationPanel 等)

我正在尝试找出一个优雅的解决方案来执行以下操作:

• 当单选按钮列表的选定值为 0 或 5-7 时，隐藏关联的面板。
• 当选择的值为 1-4 时，显示关联的面板。
• 让此代码适用于所有部分，以避免臃肿(如果可能)。

有什么建议吗？

编辑:每次 GroupButtons 选择发生变化时，以下代码都会使我的 GroupPanel 面板隐藏和显示。但同样，我需要它在 1-4 时显示，在 0 和 5-7 时隐藏。

<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    var id = '<%= GroupButtons.ClientId %>_0';
       $(function() {
        var i = 0

        $('#<%= GroupButtons.ClientId %> :radio').click(function(){
            if ($(this).attr('id') != id) {
                $('#<%= GroupPanel.ClientId%>').toggle();
                id = $(this).attr('id');
            }
        });
        });
</script>

Answer 1

使用 ASP.NET:这是您将在 selectedIndexChanged 事件中使用的代码:

您可以创建一个列表(要显示面板的值)并检查所选值是否存在于该列表中。

List<string> displayList = new List<string> { "1", "2", "3","4" };
GroupPanel.Visible = displayList.Contains(GroupButtons.SelectedValue) ? true : false;

由于这在不同的部分中重复，因此您可以使用 get 属性在业务对象中创建列表，并在后面的代码中使用它来检查值。

由于您现在已经更新了问题并正在客户端寻找某些内容，因此这可能会有所帮助:

fiddle : http://jsfiddle.net/W4Km8/2174/

这就是您的代码的外观:

 <div class="toggleDisplay">
            <asp:RadioButtonList ID="GroupButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="0" Selected="true" />
                <asp:ListItem Value="1" />
                <asp:ListItem Value="2" />
                <asp:ListItem Value="3" />
                <asp:ListItem Value="4" />
                <asp:ListItem Value="5" />
                <asp:ListItem Value="6" />
                <asp:ListItem Value="7" />
            </asp:RadioButtonList>
            <asp:Panel ID="GroupPanel" runat="server">
                <b>How can we improve our service?</b><br />
                <asp:TextBox ID="GroupTextBox" runat="server" />
            </asp:Panel>
        </div>

        <div class="toggleDisplay">
            <asp:RadioButtonList ID="EducationButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="0" Selected="true" />
                <asp:ListItem Value="1" />
                <asp:ListItem Value="2" />
                <asp:ListItem Value="3" />
                <asp:ListItem Value="4" />
                <asp:ListItem Value="5" />
                <asp:ListItem Value="6" />
                <asp:ListItem Value="7" />
            </asp:RadioButtonList>
            <asp:Panel ID="EducationPanel" runat="server">
                <b>How can we improve our service?</b><br />
                <asp:TextBox ID="TextBox1" runat="server" />
            </asp:Panel>
        </div>

描述:将按钮和面板放在一个带有toggleDisplay类的div中。这里重要的一点是面板 ID 应该以单词“Panel”结尾，因为我们将在 jquery 中使用它。

这是脚本标记中的内容:

    $(document).ready(function () {
        $(this).find("[id$='Panel']").hide();
        $(".toggleDisplay").change(function () {
            var groupName = $(this).find(":radio").attr('name');
            var ans = $('input[name="' + groupName + '"]:radio:checked').val();
            var displaylist = ["1", "2", "3", "4"];
            if (displaylist.indexOf(ans) > -1) {
                $(this).find("[id$='Panel']").show();
            } else {
                $(this).find("[id$='Panel']").hide();
            }
    });
});

所以任何具有toggleDisplay类的东西都会触发这个脚本。