基于所选收音机按钮的显示面板
目前，我的页面上有以下代码：
<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、EducationPanel/EducationPanel等)重复。
我正试图找出一个优雅的解决方案来完成以下工作：
- 当单选按钮列表的选定值为0或5-7时，隐藏关联面板.
- 当选定的值为1-4时，显示关联面板。
- 让这段代码适用于所有的部分，以避免膨胀(如果可能的话)。
有什么建议吗？
编辑:下面的代码会让我的GroupPanel面板在每次GroupButtons选择更改时隐藏并显示出来。但再次，我需要它显示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>回答 1
Stack Overflow用户
发布于 2014-10-02 15:45:49
使用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类的任何内容都会触发这个脚本。
https://stackoverflow.com/questions/26164051
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号