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";
                }
            }