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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com