ASP.NET控件之RadioButtonList詳解，

ASP.NET控件之RadioButtonList詳解，

“RadioButtonList”控件表示一個封裝了一組單選按鈕控件的列表控件。 

可以使用兩種類型的 ASP.NET 控件將單選按鈕添加到網頁上：各個“RadioButton”控件或一個“RadioButtonList”控件。這兩類控件都允許用戶從一小組互相排斥的預定義選項中進行選擇。使用這些控件，可定義任意數目的帶標簽的單選按鈕，並將它們水平或垂直排列。 

命名空間:System.Web.UI.WebControls
程序集:System.Web（在 system.web.dll 中） 

[ValidationPropertyAttribute("SelectedItem")]
public class RadioButtonList : ListControl, IRepeatInfoUser, INamingContainer, IPostBackDataHandler
RadioButtonList 控件為網頁開發人員提供了一組單選按鈕，這些按鈕可以通過數據綁定動態生成。該控件包含一個 Items 集合，集合中的成員與列表中的各項相對應。若要確定選擇了哪一項，請測試列表的 SelectedItem 屬性。 

可以用 RepeatLayout 和 RepeatDirection 屬性指定如何呈現列表。如果將 RepeatLayout 設置為 RepeatLayout.Table（默認設置），列表將呈現在表中。如果設置為 RepeatLayout.Flow，列表將不以表格形式呈現。默認情況下，RepeatDirection 設置為 RepeatDirection.Vertical。將該屬性設置為 RepeatDirection.Horizontal 時，列表將水平呈現。 

RadioButtonList用法：

                <div class="rblStyle">
                <asp:RadioButtonList ID="rblChangQHT" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Text="是" Value="1"></asp:ListItem>
                <asp:ListItem Text="否" Value="0"></asp:ListItem>
                </asp:RadioButtonList></div> 

1.RadioButtonList 校驗

    var rb_ChangQHT = document.getElementById("rblChangQHT");
   var ShiF = rb_ChangQHT.getElementsByTagName("INPUT");
   var result = false;
   for (var i = 0; i < ShiF.length; i++) {
    if (ShiF[i].checked) {
     result = true;
     break;
    }
   }
   if (!result) {
    alert("是否為中長期合同為必填項！");
    return false;
   }

2.RadioButtonList樣式調整 

.rblStyle{width:100%;height:auto;}
.rblStyle input{border-style:none;} 

3.onselectedindexchanged事件 

像下拉控件dropdownlist控件一樣，它也有onselectedindexchanged事件，當選項改變後進行觸發 

注意點是：控件中的AutoPostBack屬性一定設為"True"，這樣服務器端才知道你的選項改變了，並觸發相應事件

4.為ListItem添加提示

RadioButtonList1.Items[0].Attributes.Add("title", "提示內容");

5.綁定數據源            

string sql = "select * from province";
DataTable dt = SQLHelper.ExecuteDataTable(sql);
this.RadioButtonList1.DataSource = dt;
this.RadioButtonList1.DataTextField = "Provinces";
this.RadioButtonList1.DataValueField = "PId";
this.RadioButtonList1.DataBind();

6.改變選中項的前景色

<asp:RadioButtonList ID="rblIsLock" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblIsLock_SelectedIndexChanged" RepeatDirection="Horizontal" RepeatLayout="Flow">      
<asp:ListItem Selected="True" Value="0">啟用 </asp:ListItem>      
<asp:ListItem Value="1">禁用 </asp:ListItem> 
</asp:RadioButtonList> 
<label>*禁用的用戶將無法登錄</label>

後台：   

protected void rblIsLock_SelectedIndexChanged(object sender, EventArgs e) 

{  
 var rbl = sender as RadioButtonList;  
 HighliehgSelectedItem(rbl); 
}
 
private void HighliehgSelectedItem(RadioButtonList rbl)  
{  
 foreach (ListItem li in rbl.Items)  
 {    
  if (li.Selected)   
 {   
  li.Attributes.Add("style", "color: red;");   
  }  

 } 

}

7.後台動態增加RadioButtonList   

 RadioButtonList rbl = new RadioButtonList();
     rbl.ID = "rbl" + (i + 1).ToString();
     rbl.BorderStyle = BorderStyle.None;
     rbl.RepeatLayout = RepeatLayout.Flow;
     rbl.RepeatDirection = RepeatDirection.Horizontal;
     rbl.TextAlign = TextAlign.Right;
     rbl.CellSpacing = 6;
     rbl.Attributes.Add("onclick", "CheckRbl('ctl00_ctl00_ctl00_ContentPlaceHolder1_cphBody_cphLower_" + rbl.ID + "')");
     rbl.DataSource = dtRating.DefaultView;
     rbl.DataTextField = "LevelID";
     rbl.DataValueField = "LevelID";
     rbl.DataBind();
     tc.Controls.Add(rbl); //tc是TableRow的一個單元格TableCell
 
     for (int k = 0; k < rbl.Items.Count; k++)
     {
      rbl.Items[k].Attributes.Add("title", dtRating.Rows[k][1].ToString());
      rbl.Items[k].Attributes.Add("style", "margin-left:10px;");
     }

8.前台改變選中項的背景色 

   window.onload = function () {
   var arr = document.getElementsByTagName("INPUT");
   for (var i = 0; i < arr.length; i++) {
    if (arr[i].checked) {
     if (arr[i].type == "radio") {
      arr[i].style.backgroundColor = "red";
     }
     else {
      arr[i].style.backgroundColor = "";
     }
    }
    else {
     arr[i].style.backgroundColor = "";
    }
   }
  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持幫客之家。