Question

我有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都有一些文本框和按钮进行搜索。我如何使用radiobuttonlist，当我检查一些收音机时，只有一个div显示

Answer 1

您有两种方法，您可以在客户端进行，也可以在服务器端进行，具体取决于您的需求：

服务器端解决方案：您需要将RadioButtonList的AutoPostBack属性添加为true，divs将runat属性设置为{ {1}}

<强>标记：

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>

客户端解决方案：

<强>的Javascript ：

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

}

<强>标记：

 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";
                            }
                        }
                    }
                }
            }
        }

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

Answer 2

更好地使用客户端脚本进行此类操作 ...

我用JQuery编写了下面的代码试试......

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>

Answer 3

您必须设置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>

如何使用RadioButtonList显示/隐藏div

3 个答案: