ASP.NET控件之RadioButtonList

“RadioButtonList”控件表示一个封装了一组单选按钮控件的列表控件。可以使用两种类型的 ASP.NET 控件将单选按钮添加到网页上：各个“RadioButton”控件或一个“RadioButtonList”控件。这两类控件都允许用户从一小组互相排斥的预定义选项中进行选择。使用这些控件，可定义任意数目的带标签的单选按钮，并将它们水平或垂直排列。
    命名空间:System.Web.UI.WebControl

    程序集: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 provin
4000
ce";

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

                }

            }

        }