Each of the three controls has a collection of items that you can use to control the rendering of the list using the RepeatLayout and RepeatDirection properties. If the value of repeatlayout is table, the list is rendered in the table. If set to flow, the list is rendered without any table structure. By default, the value of RepeatDirection is Vertical. Setting this property to horizontal will render the list horizontally.
RadioButtonList: Control provides a single select list of selected options (data source radio). Similar to other list controls, RadioButtonList has a items collection whose members correspond to each item in the list.
DropDownList: Drop-down list selection, for some forms of input, the user must select an option from the list of applicable options (Drop-down only selection).
CheckBoxList: A multiple-selection list that renders a data source horizontally or vertically to the user, and allows the user to select multiple item options.
Since these three controls are server-side controls that need to be resolved at the client end, there are three server-side, client examples of the following controls
Server-side
Copy Code code as follows:
<asp:radiobuttonlist id= "RadioButtonList1" repeatdirection= "horizontal" repeatlayout= "Flow"
runat= "Server" >
<asp:listitem value= "0" > Single selection </asp:ListItem>
<asp:listitem value= "1" > single select two </asp:ListItem>
<asp:listitem value= "2" > single select three </asp:ListItem>
</asp:RadioButtonList>
<br/>
<asp:checkboxlist id= "CheckBoxList1" repeatdirection= "horizontal" repeatlayout= "Flow"
runat= "Server" >
<asp:listitem value= "0" > Optional one </asp:ListItem>
<asp:listitem value= "1" > Multi-selection two </asp:ListItem>
<asp:listitem value= "2" > Multi-selection three </asp:ListItem>
</asp:CheckBoxList>
<br/>
<asp:dropdownlist id= "DropDownList1" repeatdirection= "horizontal" repeatlayout= "Flow"
runat= "Server" >
<asp:listitem value= "0" > dropdown select one </asp:ListItem>
<asp:listitem value= "1" > Dropdown option two </asp:ListItem>
<asp:listitem value= "2" > dropdown select three </asp:ListItem>
</asp:DropDownList>
After browser parsing
Copy Code code as follows:
<span id= "RadioButtonList1" >
<input id= "RADIOBUTTONLIST1_0" type= "Radio" name= "RadioButtonList1" value= "0"/><label for= " Radiobuttonlist1_0 "> single Select one </label>
<input id= "Radiobuttonlist1_1" type= "Radio" name= "RadioButtonList1" value= "1"/><label for= " Radiobuttonlist1_1 "> Single selection Two </label>
<input id= "Radiobuttonlist1_2" type= "Radio" name= "RadioButtonList1" value= "2"/><label for= " Radiobuttonlist1_2 "> Single selection three </label>
</span>
<br/>
<span id= "CheckBoxList1" >
<input id= "checkboxlist1_0" type= "checkbox" Name= "checkboxlist1$0" value= "0"/><label for= "CheckBoxList1_0" > One More Choice </label>
<input id= "checkboxlist1_1" type= "checkbox" Name= "checkboxlist1$1" value= "1"/><label for= "CheckBoxList1_1" > Optional Two </label>
<input id= "checkboxlist1_2" type= "checkbox" Name= "Checkboxlist1$2" value= "2"/><label for= "CheckBoxList1_2" > Optional Three </label>
</span>
<br/>
<select name= "DropDownList1" id= "DropDownList1" repeatdirection= "horizontal" repeatlayout= "Flow" >
<option value= "0" > dropdown select one </option>
<option value= "1" > Dropdown option two </option>
<option value= "2" > dropdown select three </option>
</select>
The operation of these three controls is nothing more than a value and an assignment, and the following is done through jquery and. CS Two ways
jquery operates on three types of controls
1, RadioButtonList
1) Take the value
Copy Code code as follows:
$ ("#RadioButtonList1"). Change (function () {
The Val value of the selected item pops up
Alert ($ ("Input[name= ' RadioButtonList1 ']:checked"). Val ());
Popup text value for selected item
Alert ($ ("Input[name= ' RadioButtonList1 ']:checked+label"). Text ())
});
2) Assigning value
Copy Code code as follows:
The second item is selected by default
var RBTs = document.getelementsbyname ("RadioButtonList1");
for (var i = 0; i < rbts.length; i++) {
if (Rbts[i].value = = "1")
rbts[i].checked = "true";
}
2, DropDownList
1) Take the value
Copy Code code as follows:
$ ("#DropDownList1"). Change (function () {
The Val value of the selected item pops up
Alert ($ ("#DropDownList1"). Val ());
Popup text value for selected item
Alert ($ ("#DropDownList1 option:selected"). Text ());
});
2) Assigning value
Copy Code code as follows:
The second item is selected by default
var DDLs = $ ("#DropDownList1 option");
for (var i = 0; i < ddl.length; i++) {
if (Ddl[i].value = = "1") {
ddl[i].selected = "true";
}
}
3, CheckBoxList
1) Take the value
Copy Code code as follows:
$ ("#CheckBoxList1 > Input"). Click (function () {
var arrval = [];
var val = "";
$ ("#CheckBoxList1: checkbox:checked"). each (function () {
Put the value of the selected item into the array arrval
Arrval.push ($ (this). Val ())
})
Connect the Val value in the array with ', '
val = Arrval.join (', ');
pops up all selected items to connect
Alert (val);
var arrtext = [];
var text = "";
$ ("#CheckBoxList1: checkbox:checked"). each (function () {
Put the text value of the selected item into the Arrtext array
Arrtext.push ($ (this). Next (). html ());
Use the data in the array to connect
Text = Arrtext.join (",");
})
Popup text value for selected item
alert (text);
});
2) Assigning value
Copy Code code as follows:
var cbks = $ ("#CheckBoxList1 input[type= ' checkbox ')");
for (var i = 0; i < cbks.length; i++) {
if (cbks[i].value== "1" | | cbks[i].value== "2") {
cbks[i].checked = "true";
}
}
