ASP.NET服務(wù)器端控件RadioButtonList，DropDownList，CheckBoxList的取值、賦值用法

更新時(shí)間：2013年10月11日 12:30:52 作者：

這三個(gè)控件都有一個(gè)Items集合，可以用 RepeatLayout 和 RepeatDirection 屬性來(lái)控制列表的呈現(xiàn)形式

這三個(gè)控件都有一個(gè)Items集合，可以用 RepeatLayout 和 RepeatDirection 屬性來(lái)控制列表的呈現(xiàn)形式。如果 RepeatLayout 的值為 Table，那么將在表中呈現(xiàn)列表。如果設(shè)置成 Flow，那么將在沒(méi)有任何表結(jié)構(gòu)的情況下呈現(xiàn)列表。默認(rèn)情況下，RepeatDirection 的值為 Vertical。將此屬性設(shè)置成 Horizontal 將會(huì)使列表水平呈現(xiàn)。

RadioButtonList：控件提供已選中一個(gè)選項(xiàng)的單項(xiàng)選擇列表（數(shù)據(jù)源單選）。與其他列表控件相似，RadioButtonList 有一個(gè) Items 集合，其成員與列表中的每個(gè)項(xiàng)目相對(duì)應(yīng)。

DropDownList：下拉列表選擇，對(duì)于有些形式的輸入，用戶(hù)必須從適用選項(xiàng)列表中選擇一個(gè)選項(xiàng)（下拉唯一選擇）。

CheckBoxList：多選列表，將數(shù)據(jù)源以橫向或縱向方式呈現(xiàn)給用戶(hù)，用戶(hù)可以進(jìn)行多個(gè)item的選擇。

由于這三個(gè)控件是服務(wù)器端控件，需要在客戶(hù)端進(jìn)行解析，下面有三個(gè)控件的服務(wù)器端、客戶(hù)端例子

服務(wù)器端

復(fù)制代碼代碼如下:

<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>

經(jīng)過(guò)瀏覽器解析后

復(fù)制代碼代碼如下:

<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>

對(duì)于這三個(gè)控件的操作無(wú)非就是取值和賦值，下面通過(guò)Jquery和.cs兩種方式進(jìn)行操作

Jquery對(duì)三種控件進(jìn)行操作

1、RadioButtonList

1）取值

復(fù)制代碼代碼如下:

 $("#RadioButtonList1").change(function () {
   //彈出選中項(xiàng)的val值
                alert($("input[name='RadioButtonList1']:checked").val());
  //彈出選中項(xiàng)的text值
                alert($("input[name='RadioButtonList1']:checked+label").text())
  });  

2）賦值

復(fù)制代碼代碼如下:

//默認(rèn)選中第二項(xiàng)
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）取值

復(fù)制代碼代碼如下:

 $("#DropDownList1").change(function () {
//彈出選中項(xiàng)的Val值
                alert($("#DropDownList1").val());
//彈出選中項(xiàng)的text值
                alert($("#DropDownList1 option:selected").text());
            });

2）賦值

復(fù)制代碼代碼如下:

//默認(rèn)選中第二項(xiàng)
var ddls = $("#DropDownList1 option");
                        for (var i = 0; i < ddl.length; i++) {
                            if (ddl[i].value == "1") {
                                ddl[i].selected = "true";
                            }
                        }

3、CheckBoxList

1）取值

復(fù)制代碼代碼如下:

$("#CheckBoxList1 > input").click(function () {
               var arrval = [];
                var val = "";
              $("#CheckBoxList1 :checkbox:checked").each(function () {
             //將選中項(xiàng)的值放進(jìn)數(shù)組arrval
                    arrval.push($(this).val())
                })
            //將數(shù)組中的val值以‘,'進(jìn)行連接
                val = arrval.join(',');
              //彈出所有選擇的項(xiàng)以,連接
                                alert(val);
                var arrtext = [];
                var text = "";
                $("#CheckBoxList1 :checkbox:checked").each(function () {
              //將選中項(xiàng)的text值放進(jìn)arrtext數(shù)組中
                    arrtext.push($(this).next().html());
              //將數(shù)組中的數(shù)據(jù)用,進(jìn)行連接
                    text = arrtext.join(",");
                })
             //彈出選中項(xiàng)的Text值
               alert(text);
                });

2）賦值

復(fù)制代碼代碼如下:

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

您可能感興趣的文章: