ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法

这三个控件都有一个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";
 }
 }

本文ASP.NET服务器端控件RadioButtonList，DropDownList，CheckBoxList的取值、赋值用法到此结束。成熟的麦子低垂着头，那是在教我们谦逊;一群蚂蚁能抬走大骨头，那是在教我们团结;温柔的水滴穿岩石，那是在教我们坚韧;蜜蜂在花丛中忙碌，那是在教我们勤劳。小编再次感谢大家对我们的支持！