How to make that only one radio button can be selected in a repeater?
Question
I am implementing a table in an aspx page using repeater, the table is shown correctly.
In every row of the table I want to add a radio button ( a radio button is selected, means that row is selected), when I execute my program the page showed is the following:
The problem is as you can see in the image is that many radio buttons can be selected at the same time, my purpose is to allow the user to select only one row (one radio button) if a radio button is checked the other shoul be unchekced automatically.
here is my code:
<%@ 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>
What should I add to the aspx code or to the code behind to make that only one radio button can be selected ?
Any help please ?
2 answers
solution1
0 ACCPTED 2017-11-16 18:10:41
Start by giving your table an unique ID (a Repeater does not generate a html element which has it's ID, so ClientID is of no use)
<table id="rptCustomers" cellspacing="0" rules="all" border="1" align="center">
Now you can reference that table in the following jQuery function
<script type="text/javascript">
$('#rptCustomers input[type="radio"]').click(function () {
$('#rptCustomers input[type="radio"]').each(function () {
$(this).prop("checked", "");
});
$(this).prop("checked", "checked");
});
</script>
It basically loops all the radio buttons within that table and unchecks them. Then it re-enables the one that was clicked.
For this to work you need jQuery.
solution2
0 2017-11-17 03:01:51
To achieve this, it can be approached in two ways. One is client side using javascript (something like @VDWWD's answer) and other is server side as below.
//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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.