ASP.NET控件之RadioButtonList詳解

更新時間：2016年09月18日 16:20:52 作者：joesphos

這篇文章主要為大家詳細(xì)介紹了ASP.NET控件之RadioButtonList的使用方法，感興趣的小伙伴們可以參考一下

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

可以使用兩種類型的 ASP.NET 控件將單選按鈕添加到網(wǎng)頁上：各個“RadioButton”控件或一個“RadioButtonList”控件。這兩類控件都允許用戶從一小組互相排斥的預(yù)定義選項(xiàng)中進(jìn)行選擇。使用這些控件，可定義任意數(shù)目的帶標(biāo)簽的單選按鈕，并將它們水平或垂直排列。

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

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

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

RadioButtonList用法：

1.RadioButtonList 校驗(yàn)

  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("是否為中長期合同為必填項(xiàng)！");
  return false;
  }

2.RadioButtonList樣式調(diào)整

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

3.onselectedindexchanged事件

像下拉控件dropdownlist控件一樣，它也有onselectedindexchanged事件，當(dāng)選項(xiàng)改變后進(jìn)行觸發(fā)

注意點(diǎn)是：控件中的AutoPostBack屬性一定設(shè)為"True"，這樣服務(wù)器端才知道你的選項(xiàng)改變了，并觸發(fā)相應(yīng)事件

4.為ListItem添加提示

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

5.綁定數(shù)據(jù)源

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.改變選中項(xiàng)的前景色

<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.后臺動態(tài)增加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.前臺改變選中項(xiàng)的背景色

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

為大家附3個精彩的專題：

ASP.NET控件使用手冊

ASP.NET數(shù)據(jù)綁定控件使用匯總

ASP.NET控件使用匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: