ASP.NET控件之RadioButtonList詳解
“RadioButtonList”控件表示一個封裝了一組單選按鈕控件的列表控件。
可以使用兩種類型的 ASP.NET 控件將單選按鈕添加到網(wǎng)頁上:各個“RadioButton”控件或一個“RadioButtonList”控件。這兩類控件都允許用戶從一小組互相排斥的預(yù)定義選項中進行選擇。使用這些控件,可定義任意數(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 集合,集合中的成員與列表中的各項相對應(yīng)。若要確定選擇了哪一項,請測試列表的 SelectedItem 屬性。
可以用 RepeatLayout 和 RepeatDirection 屬性指定如何呈現(xiàn)列表。如果將 RepeatLayout 設(shè)置為 RepeatLayout.Table(默認設(shè)置),列表將呈現(xiàn)在表中。如果設(shè)置為 RepeatLayout.Flow,列表將不以表格形式呈現(xiàn)。默認情況下,RepeatDirection 設(shè)置為 RepeatDirection.Vertical。將該屬性設(shè)置為 RepeatDirection.Horizontal 時,列表將水平呈現(xiàn)。
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樣式調(diào)整
.rblStyle{width:100%;height:auto;}
.rblStyle input{border-style:none;}
3.onselectedindexchanged事件
像下拉控件dropdownlist控件一樣,它也有onselectedindexchanged事件,當(dāng)選項改變后進行觸發(fā)
注意點是:控件中的AutoPostBack屬性一定設(shè)為"True",這樣服務(wù)器端才知道你的選項改變了,并觸發(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.改變選中項的前景色
<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.前臺改變選中項的背景色
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個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 如何為CheckBoxList和RadioButtonList添加滾動條
- ASP.NET中RadioButtonList綁定后臺數(shù)據(jù)后觸發(fā)點擊事件
- ASP.NET服務(wù)器端控件RadioButtonList,DropDownList,CheckBoxList的取值、賦值用法
- jquery判斷RadioButtonList和RadioButton中是否有選中項示例
- js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
- RadioButtonList綁定圖片及泛型Dictionary應(yīng)用
- javascript判斷是否有對RadioButtonList選項選擇
- ASP.NET jQuery 實例16 通過控件CustomValidator驗證RadioButtonList
- JQuery中對服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作總結(jié)
- jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標(biāo)簽后的value和text值
相關(guān)文章
c#網(wǎng)站W(wǎng)ebConfig中域名引用示例介紹
這篇文章主要介紹了c#網(wǎng)站W(wǎng)ebConfig中域名引用,需要的朋友可以參考下2014-06-06.net調(diào)用JScript腳本及JS url加密解密
.net調(diào)用JScript腳本及JS url加密解密,需要的朋友可以參考一下2013-03-03ASP.NET中實現(xiàn)jQuery Validation-Engine的Ajax驗證實現(xiàn)代碼
在jQuery的表變驗證插件中Validation-Engine是一款高質(zhì)量的產(chǎn)品,提示效果非常精美,而且里面包含了AJAX驗證功能2012-05-05asp.net 抓取網(wǎng)頁源碼三種實現(xiàn)方法
asp.net 抓取網(wǎng)頁源碼三種實現(xiàn)方法,需要的朋友可以參考一下2013-06-06asp.net textbox javascript實現(xiàn)enter與ctrl+enter互換 文本框發(fā)送消息與換行(類似
今天與大家分享一下 asp.net textbox javascript實現(xiàn)enter與ctrl+enter互換 文本框發(fā)送消息與換行(類似于QQ),這個功能到底怎么實現(xiàn)?首先聲明以下幾點2012-01-01.net core使用FastHttpApi構(gòu)建web聊天室實例代碼
這篇文章主要給大家介紹了關(guān)于.net core使用FastHttpApi構(gòu)建web聊天室的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10.NET開發(fā)人員關(guān)于ML.NET的入門學(xué)習(xí)
隨著谷歌,F(xiàn)acebook發(fā)布他們的工具機器學(xué)習(xí)工具Tensorflow 2和PyTorch,微軟也發(fā)布了ML.NET 1.0??梢哉f2019年是機器學(xué)習(xí)社區(qū)普及化的一年,下面小編向大家簡單介紹一下關(guān)于ML.NET的入門學(xué)習(xí)2019-05-05C# javaScript函數(shù)的相互調(diào)用
如何在JavaScript訪問C#函數(shù),如何在C#中訪問JavaScript的已有變量等實現(xiàn)方法2008-12-12asp.net c#采集需要登錄頁面的實現(xiàn)原理及代碼
當(dāng)我們采集頁面的時候,如果被采集的網(wǎng)站需要登錄才能采集,原理搞清楚了,就好辦了,我們所要做的僅僅是在采集的時候(或者說HttpWebRequest提交數(shù)據(jù)的時候),將Cookie信息放入Http請求頭里面就可以了,感興趣的朋友可以了解下,或許對你有所幫助2013-02-02