ASP. NET Server side controls RadioButtonList DropDownList CheckBoxList value assignment usage
- 2020-07-21 07:25:45
- OfStack
Each of the three controls has an Items collection, and you can use the RepeatLayout and RepeatDirection attributes to control the presentation of the list. 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 option list (data source radio) with 1 option selected. Like other list controls, RadioButtonList has one 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 1 option from the list of applicable options (drop-down only 1 option).
CheckBoxList: Multi-selection list, which presents the data source to the user in a horizontal or vertical manner and allows the user to make multiple item choices.
Since these three controls are server-side controls, they need to be resolved on the client side. The following are server-side and client-side examples for the three controls
The server side
<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
<asp:ListItem Value="0"> The radio 1</asp:ListItem>
<asp:ListItem Value="1"> The radio 2</asp:ListItem>
<asp:ListItem Value="2"> The radio 3</asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
<asp:ListItem Value="0"> multi-select 1</asp:ListItem>
<asp:ListItem Value="1"> multi-select 2</asp:ListItem>
<asp:ListItem Value="2"> multi-select 3</asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:DropDownList ID="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
<asp:ListItem Value="0"> The drop-down choice 1</asp:ListItem>
<asp:ListItem Value="1"> The drop-down choice 2</asp:ListItem>
<asp:ListItem Value="2"> The drop-down choice 3</asp:ListItem>
</asp:DropDownList>
After browser parsing
<span id="RadioButtonList1">
<input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0"> The radio 1</label>
<input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1"> The radio 2</label>
<input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2"> The radio 3</label>
</span>
<br />
<span id="CheckBoxList1">
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="0" /><label for="CheckBoxList1_0"> multi-select 1</label>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="1" /><label for="CheckBoxList1_1"> multi-select 2</label>
<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="2" /><label for="CheckBoxList1_2"> multi-select 3</label>
</span>
<br />
<select name="DropDownList1" id="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow">
<option value="0"> The drop-down choice 1</option>
<option value="1"> The drop-down choice 2</option>
<option value="2"> The drop-down choice 3</option>
</select>
The operation for these three controls is nothing more than value and assignment, which is done via Jquery and.cs
Jquery operates on three types of controls
1, RadioButtonList
1) values
$("#RadioButtonList1").change(function () {
// Pop up the selected item val value
alert($("input[name='RadioButtonList1']:checked").val());
// Pop up the selected item text value
alert($("input[name='RadioButtonList1']:checked+label").text())
});
2) assignment
// Default selected control 2 item
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) values
$("#DropDownList1").change(function () {
// Pop up the selected item Val value
alert($("#DropDownList1").val());
// Pop up the selected item text value
alert($("#DropDownList1 option:selected").text());
});
2) assignment
// Default selected control 2 item
var ddls = $("#DropDownList1 option");
for (var i = 0; i < ddl.length; i++) {
if (ddl[i].value == "1") {
ddl[i].selected = "true";
}
}
3, CheckBoxList
1) values
$("#CheckBoxList1 > input").click(function () {
var arrval = [];
var val = "";
$("#CheckBoxList1 :checkbox:checked").each(function () {
// Puts the value of the selected item into the array arrval
arrval.push($(this).val())
})
// Take the array val Values to ' ,' To connect
val = arrval.join(',');
// Popup all selected items to , The connection
alert(val);
var arrtext = [];
var text = "";
$("#CheckBoxList1 :checkbox:checked").each(function () {
// To select the item text Values in the arrtext In the array
arrtext.push($(this).next().html());
// Use the data in the array , To connect
text = arrtext.join(",");
})
// Pop up the selected item Text value
alert(text);
});
2) assignment
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";
}
}