如何使中继器中只能选择一个单选按钮？

Question

我正在使用转发器在 aspx 页面中实现 table，table 显示正确。

在 table 的每一行中，我想添加一个单选按钮（单选按钮是 selected，意味着该行是 selected），当我执行我的页面显示的程序如下：

问题正如您在图片中看到的那样，许多单选按钮可以同时 selected，我的目的是让用户 select 只有一行（一个单选按钮）如果一个单选按钮被选中，另一个应该自动取消选中。

这是我的代码：

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DotNetRepeater.aspx.cs" Inherits="DotNetRepeater.DotNetRepeater" %>


<script type = "text/javascript">
    function RadioCheck(rb) {
        var gv = document.getElementById("<%=rptCustomers.ClientID%>");
        var rbs = gv.getElementsByTagName("input");

        var row = rb.parentNode.parentNode;
        for (var i = 0; i < rbs.length; i++) {
            if (rbs[i].type == "radio") {
                if (rbs[i].checked && rbs[i] != rb) {
                    rbs[i].checked = false;
                    break;
                }
            }
        }
    }
    </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
            border-collapse: collapse; 
           background-color: #00FF00 ;

        }
        table th
        {
            background-color: #FF0000;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border: 2px solid black;
        }
        form {
             width: 100%;
             text-align: center;
            height: 371px;
        }
        #Button1 {
             background-color: yellow;
             font-size: 15pt;

            top: 355px;
            left: 800px;
        }
        /*#SelectRadio1{
            left: 461px;*/
        /*}*/
    </style>
</head>
<body>
    <div class="container">
        <form id="form1" runat="server">

        <asp:Repeater ID="rptCustomers" runat="server" OnItemCommand="rptCustomers_ItemCommand">

        <HeaderTemplate>

            <table cellspacing="0" rules="all" border="1"  align="center"; >

                <tr>
                       <th scope="col" style="background-color:white">

                    </th>

                    <th scope="col" style="width: 80px">
                        Name             
                    </th>
                    <th scope="col" style="width: 120px">
                        CountryRegionCode
                    </th>
                    <th scope="col" style="width: 100px">
                        Group
                    </th>
                    <th scope="col" style="width: 100px">
                        SalesYTD
                    </th>
                </tr>

        </HeaderTemplate>

        <ItemTemplate>

            <tr >
                <td style="background-color:white">                    
                     <asp:RadioButton id="Radio1" Checked="False" GroupName="RadioGroup1" runat="server" />            
                </td>
                <td>                    
                    <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />                     
                </td>
                <td>
                    <asp:Label ID="lblCountryRegionCode" runat="server" Text='<%# Eval("CountryRegionCode") %>' />
                </td>
                <td>
                    <asp:Label ID="lblGroup" runat="server" Text='<%# Eval("Group") %>' />
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("SalesYTD") %>' />
                </td>

            </tr>

        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" Width="82px" />
    </form>
        </div>
</body>
</html>

我应该向 aspx 代码或后面的代码添加什么才能使 select 只能编辑一个单选按钮？

有什么帮助吗？

Answer 1

首先为您的 table 提供一个唯一 ID（Repeater 不会生成具有其 ID 的 html 元素，因此 ClientID 没有用）

<table id="rptCustomers" cellspacing="0" rules="all" border="1" align="center">

现在您可以在下面的 jQuery 函数中引用 table

<script type="text/javascript">
    $('#rptCustomers input[type="radio"]').click(function () {
        $('#rptCustomers input[type="radio"]').each(function () {
            $(this).prop("checked", "");
        });
        $(this).prop("checked", "checked");
    });
</script>

它基本上循环了 table 中的所有单选按钮并取消选中它们。然后它会重新启用被点击的那个。

For this to work you need jQuery.

Answer 2

要实现这一点，可以通过两种方式来实现。一种是使用 javascript 的客户端（类似于@VDWWD 的回答），另一种是服务器端，如下所示。

//Repeater ItemTemplate RadioButton
<asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="true" 
            OnCheckedChanged="RadioButton1_CheckedChanged"/>


//Code Behind
protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
{
//Uncheck all RadioButtons of the rptCustomer
foreach (RepeaterItem item in rptCustomer.Items)
{
    if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
    {
        ((RadioButton)item.FindControl("RadioButton1")).Checked = false;
    }
}
//After foreach loop, set current selected checkbox checked
(sender as RadioButton).Checked = true;
}

如何使中继器中只能选择一个单选按钮？

How to make that only one radio button can be selected in a repeater?

c#

asp.net

webforms

repeater