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

　　这三个控件都有一个Items集合，可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式。如果 RepeatLayout 的值为 Table，那么将在表中呈现列表。如果设置成 Flow，那么将在没有任何表结构的情况下呈现列表。默认情况下，RepeatDirection 的值为 Vertical。将此属性设置成 Horizontal 将会使列表水平呈现。

　　RadioButtonList：控件提供已选中一个选项的单项选择列表（数据源单选）。与其他列表控件相似，RadioButtonList 有一个 Items 集合，其成员与列表中的每个项目相对应。

　　DropDownList：下拉列表选择，对于有些形式的输入，用户必须从适用选项列表中选择一个选项（下拉唯一选择）。

　　CheckBoxList：多选列表，将数据源以横向或纵向方式呈现给用户，用户可以进行多个item的选择。

　　由于这三个控件是服务器端控件，需要在客户端进行解析，下面有三个控件的服务器端、客户端例子

　　服务器端

　　复制代码 代码如下:

　　

　　runat="server">

　　单选一

　　单选二

　　单选三

　　

　　

　　

　　runat="server">

　　多选一

　　多选二

　　多选三

　　

　　

　　

　　runat="server">

　　下拉选择一

　　下拉选择二

　　下拉选择三

　　

　　经过浏览器解析后

　　复制代码 代码如下:

　　

　　单选一

　　单选二

　　单选三

　　

　　

　　

　　多选一

　　多选二

　　多选三

　　

　　

　　

　　对于这三个控件的操作无非就是取值和赋值，下面通过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";

　　}

　　}

　　您可能感兴趣的文章: