Use radiobutton in repeter to generate radio button groups

When we use repeter to bind data to radiobutton to generate a single-choice button group at the front end, we may encounter the problem that the generated button cannot achieve single-choice, even if you set the groupname attribute, and does not work. In this case, we need to use our powerful Js.CodeAs follows:

Some front-end repeter code:

<Asp: repeater id = "repeaterym" runat = "server"> <itemtemplate> <li> <asp: radiobutton id = "year" text = '<% # eval ("years ") %> 'runat = "server" groupname = "year" clientidmode = "static" onclick = "selectsingleradio (this, 'Year');"/> year <asp: dropdownlist id = "monthlist" name = "month" width = "120" runat = "server" clientidmode = "static"> <asp: listitem> all </ASP: listitem> </ASP: dropdownlist> </LI> </itemtemplate> </ASP: repeater>
 

Source code and dome of the generated radio button group:

<Ul> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl00 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2001 </label> year <select name =" repeaterym $ ctl00 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 10 "> August 1, October </option> </SELECT> </LI> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl01 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2005 </label> year <select name =" repeaterym $ ctl01 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 6 "> August 1, June </option> </SELECT> </LI> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl02 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2006 </label> year <select name =" repeaterym $ ctl02 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 2 "> August 1, February </option> <option value =" 3 "> August 1, March </Option> <option value = "5"> May </option> <option value = "6"> June </option> <option value = "12"> December </option> </SELECT> </LI> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl03 $ year" value = "year" onclick =" selectsingleradio (this, 'Year '); "/> <label for =" year "> 2007 </label> year <select name =" repeaterym $ ctl03 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 11 "> August 1, November </option> </SELECT> </LI> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl04 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2008 </label> year <select name =" repeaterym $ ctl04 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 1 "> August 1, January </option> <option value =" 6 "> August 1, June </Option> </SELECT> </LI> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl05 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2009 </label> year <select name =" repeaterym $ ctl05 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 11 "> August 1, November </option> <option value =" 12 "> August 1, December </Option> </SELECT> </LI> <li> <input id = "year" type = "radio" name = "repeaterym $ ctl06 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2010 </label> year <select name =" repeaterym $ ctl06 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 2 "> August 1, February </option> <option value =" 3 "> August 1, March </Option> <option value = "4"> April </option> <option value = "7"> July </option> <option value = "8"> August </option> <option value = "9"> September </option> <option value = "12"> December </option> </SELECT> </LI> <li> <input ID = "year" type = "radio" name = "repeaterym $ ctl07 $ year" value = "year" onclick = "selectsingleradio (this, 'Year '); "/> <label for =" year "> 2011 </label> year <select name =" repeaterym $ ctl07 $ monthlist "id =" monthlist "name =" month "style = "width: 120px; "> <option value =" 0 "> all </option> <option value =" 1 "> August 1, January </option> <option value =" 5 "> August 1, May </Option> <option value = "6"> June </option> <option value = "7"> July </option> <option value = "10"> October </option> <option value = "11"> November </option> <option value = "12"> December </option> </SELECT> </LI> </ul>

 

JS events that achieve single-choice results:

View code

 
// Set the radio group generated by repeter to single-Choice
Function selectsingleradio (rbtn, groupname ){
$ ("Input [type = radio]"). Each (function (I ){
If (this. Name. substring (this. Name. Length-groupname. Length) = groupname ){
This. Checked = false;
}
})
Rbtn. Checked = true;
}
 

// Set the selected items by default
$ (Document). Ready (function (){
VaR carray = $ ("# rsview input [type = radio]")
VaR I;
For (I = 0; I <carray. length; I ++ ){
If (carray [I]. Checked ){
Carray [I]. Checked = false;
}
Carray [carray. Length-1]. Checked = true;
}
});
 

Now let's take a look at how the background traverses repeter to load the control values in the corresponding group. The Code is as follows:

// Obtain all months and months
Void loaddata ()
{
Newland dataytd = new Newland (-1, 0 );
Dataset DS = newlandreportadapter. instance. getdata (dataytd );
// Filter out non-repeated years
Datatable result = Ds. Tables [0]. defaultview. totable (true, "years ");
Repeaterym. datasource = result;
Repeaterym. databind ();
// Traverse repeaterym. Load the month of each year
Foreach (repeateritem item in repeaterym. Items)
{
Radiobutton year = (radiobutton) item. findcontrol ("year ");
String yearnow = year. text;
Dataview DV = Ds. Tables [0]. defaultview;
DV. rowfilter = "years =" + yearnow;
Datatable dt = DV. totable ();
Dropdownlist monthlist = (dropdownlist) item. findcontrol ("monthlist ");
Monthlist. datasource = DT;
Monthlist. datatextfield = "months ";
Monthlist. datavaluefield = "months ";
Monthlist. datatextformatstring = "{0} month ";
Monthlist. databind ();
Monthlist. Items. insert (0, new listitem ("all", "0 "));
}
}

Finally, let's take a look at how the backend obtains the value selected by the front-end:

// Generate the report protected void selectdata_click (Object sender, eventargs e) {string year = string. empty; string month = string. empty; // traverse repeater to obtain the value of the selected control foreach (repeateritem item in repeaterym. items) {radiobutton yearbtn = (radiobutton) item. findcontrol ("year"); If (yearbtn. checked) {year = yearbtn. text; // get the selected year dropdownlist monthlist = (dropdownlist) item. findcontrol ("monthlist"); // obtain the selected month = monthlist. selectedvalue ;}}}