2

我有带有 3 个选项的 RadioButtonList：

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
         <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
         <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
    </asp:RadioButtonList>

我有 3 个 div，每个都有一些文本框和按钮来进行一些搜索。如何使用单选按钮列表，当我检查一些单选时，只有一个 div 显示

4

3 回答 3

6

您有两种方法，您可以在客户端执行此操作，也可以在服务器端执行此操作，具体取决于您的需要：

服务器端解决方案：您需要将AutoPostBackRadioButtonList 的属性添加为 true，并且divs将runat属性设置为server

标记：

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
     <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
     <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<div id="myDiv1" runat="server" visible="false">Div Content</div>

后面的代码：

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (this.RadioButtonList1.SelectedValue =="2")
                this.myDiv1.Visible = true;
    else
        this.myDiv1.Visible = false;

}

客户端解决方案：

Javascript：

 window.onload = function () {
            var inputs = document.getElementsByTagName("input");

            if (inputs.length > 0) {
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].type == "radio") {
                        inputs[i].onclick = function () {
                            if (this.value == "2") {
                                document.getElementById("div1").style.display = "block";
                            }
                            else {
                                document.getElementById("div1").style.display = "none";
                            }
                        }
                    }
                }
            }
        }

标记：

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" >
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
        <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
        <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<div id="div1" style="display:none">Div Content</div>

当然，这将获得页面中的所有单选按钮，因此您可能需要确保获得正确的单选按钮。

于 2013-04-08T16:59:44.460 回答
6

最好将客户端脚本用于此类操作...

我已经使用 JQuery 编写了下面的代码尝试...

查询：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $('#RadioButtonList1 input').click(function () {
                var value = $('#RadioButtonList1 input:checked').val();
                if (value == 1) {
                    $("#divName").show();
                    $("#divDate").hide();
                    $("#divValue").hide();
                }
                if (value == 2) {
                    $("#divName").hide();
                    $("#divDate").show();
                    $("#divValue").hide();
                }
                if (value == 3) {
                    $("#divName").hide();
                    $("#divDate").hide();
                    $("#divValue").show();
                }

            });
        });
</script>

HTML： 

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
     <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
     <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<div id="divName">Search By Name</div>
<div id="divDate">Search By Date</div>
<div id="divValue">Search By Value</div>
于 2013-04-08T17:14:08.057 回答
2

您必须设置AutoPostback = "true"，处理OnSelectedIndexChanged事件，然后在后面的代码中显示/隐藏适当的 div。像这样的东西：

<asp:RadioButtonList AutoPostBack="True"  
 OnSelectedIndexChanged="Index_Changed" ID="RadioButtonList1" runat="server">
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
     <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
     <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>


protected void Index_Changed(Object sender, EventArgs e) 
{

   if(RadioButtonList1.SelectedIte.Value=="1")
   {
      div1.Visible=true;
      div2.Visible=false;
      div3.Visible=false;
   else if(RadioButtonList1.SelectedIte.Value=="2")
   {
      div2.Visible=true;
      //and so on...
   }
}

显然，div 本身必须是服务器端控件，因此您必须像这样声明它们：

<div id="div1" runat="server">
content here
</div>
于 2013-04-08T16:59:24.557 回答