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

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的答案），另一种是服务器端，如下所示。

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

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-11-16 18:10:41

解决方案2
0 2017-11-17 03:01:51

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-11-16 18:10:41

解决方案2 0 2017-11-17 03:01:51

解决方案1
0 已采纳 2017-11-16 18:10:41

解决方案2
0 2017-11-17 03:01:51