Question

我正在使用转发器在aspx页面中实现一个表，表格显示正确。

在表格的每一行中，我想添加一个单选按钮（选中一个单选按钮，意味着选择了行），当我执行我的程序时，显示的页面如下：

问题是你可以在图像中看到可以同时选择许多单选按钮，我的目的是允许用户只选择一行（一个单选按钮），如果选中单选按钮其他应该自动取消。

这是我的代码：

    <%@ 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代码或后面的代码中添加什么才能选择只有一个单选按钮？

请帮忙吗？

Answer 1

首先给你的表一个唯一的ID（一个Repeater不会生成一个带有它ID的html元素，所以ClientID是没用的）

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

现在您可以在以下jQuery函数中引用该表

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

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

为此，你需要jQuery。

Answer 2

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

r1

如何在转发器中只选择一个单选按钮？

2 个答案: