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 = ""; } } }
为大家附3个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。