這三個控制項都有一個Items集合，可以用 RepeatLayout 和 RepeatDirection 屬性來控制列表的呈現形式。如果 RepeatLayout 的值為 Table，那麼將在表中呈現列表。如果設定成 Flow，那麼將在沒有任何錶結構的情況下呈現列表。預設情況下，RepeatDirection 的值為 Vertical。將此屬性設定成 Horizontal 將會使列表水平呈現。
RadioButtonList：控制項提供已選中一個選項的單項挑選清單（資料來源單選）。與其他清單控制項相似，RadioButtonList 有一個 Items 集合，其成員與列表中的每個項目相對應。
DropDownList：下拉式清單選擇，對於有些形式的輸入，使用者必須從適用選項列表中選擇一個選項（下拉唯一選擇）。
CheckBoxList：多選列表，將資料來源以橫向或縱向方式呈現給使用者，使用者可以進行多個item的選擇。
由於這三個控制項是伺服器端控制項，需要在用戶端進行解析，下面有三個控制項的伺服器端、用戶端例子
伺服器端
複製代碼 代碼如下:
<asp:RadioButtonList ID="RadioButtonList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
<asp:ListItem Value="0">單選一</asp:ListItem>
<asp:ListItem Value="1">單選二</asp:ListItem>
<asp:ListItem Value="2">單選三</asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:CheckBoxList ID="CheckBoxList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
<asp:ListItem Value="0">多選一</asp:ListItem>
<asp:ListItem Value="1">多選二</asp:ListItem>
<asp:ListItem Value="2">多選三</asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:DropDownList ID="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow"
runat="server">
<asp:ListItem Value="0">下拉選擇一</asp:ListItem>
<asp:ListItem Value="1">下拉選擇二</asp:ListItem>
<asp:ListItem Value="2">下拉選擇三</asp:ListItem>
</asp:DropDownList>
經過瀏覽器解析後
複製代碼 代碼如下:
<span id="RadioButtonList1">
<input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" /><label for="RadioButtonList1_0">單選一</label>
<input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" /><label for="RadioButtonList1_1">單選二</label>
<input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="2" /><label for="RadioButtonList1_2">單選三</label>
</span>
<br />
<span id="CheckBoxList1">
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="0" /><label for="CheckBoxList1_0">多選一</label>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="1" /><label for="CheckBoxList1_1">多選二</label>
<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" value="2" /><label for="CheckBoxList1_2">多選三</label>
</span>
<br />
<select name="DropDownList1" id="DropDownList1" RepeatDirection="Horizontal" RepeatLayout="Flow">
<option value="0">下拉選擇一</option>
<option value="1">下拉選擇二</option>
<option value="2">下拉選擇三</option>
</select>
對於這三個控制項的操作無非就是取值和賦值，下面通過Jquery和.cs兩種方式進行操作
Jquery對三種控制項進行操作
1、RadioButtonList
1）取值
複製代碼 代碼如下:
$("#RadioButtonList1").change(function () {
//彈出選中項的val值
alert($("input[name='RadioButtonList1']:checked").val());
//彈出選中項的text值
alert($("input[name='RadioButtonList1']:checked+label").text())
});
2）賦值
複製代碼 代碼如下:
//預設選中第二項
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）取值
複製代碼 代碼如下:
$("#DropDownList1").change(function () {
//彈出選中項的Val值
alert($("#DropDownList1").val());
//彈出選中項的text值
alert($("#DropDownList1 option:selected").text());
});
2）賦值
複製代碼 代碼如下:
//預設選中第二項
var ddls = $("#DropDownList1 option");
for (var i = 0; i < ddl.length; i++) {
if (ddl[i].value == "1") {
ddl[i].selected = "true";
}
}
3、CheckBoxList
1）取值
複製代碼 代碼如下:
$("#CheckBoxList1 > input").click(function () {
var arrval = [];
var val = "";
$("#CheckBoxList1 :checkbox:checked").each(function () {
//將選中項的值放進數組arrval
arrval.push($(this).val())
})
//將數組中的val值以‘,'進行串連
val = arrval.join(',');
//彈出所有選擇的項以,串連
alert(val);
var arrtext = [];
var text = "";
$("#CheckBoxList1 :checkbox:checked").each(function () {
//將選中項的text值放進arrtext數組中
arrtext.push($(this).next().html());
//將數組中的資料用,進行串連
text = arrtext.join(",");
})
//彈出選中項的Text值
alert(text);
});
2）賦值
複製代碼 代碼如下:
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";
}
}
