jQuery中RadioButtonList的功能及用法
對于RadioButtonList的功能及用法,本文將從程序規則開始介紹,在后面的實例中還涉及C#生成HTML,設置Config: AppSettings等等內容。
首先介紹程序規則:
1.對以下的選擇進行檢查,檢查是否全部選中
2,所謂的“全部選中”是指,一行中三個radiobutton必須有一個radiobutton被選中。
3. 這里一共有33個radiobutton,每三個為一組;
以下界面里面的所有元素都是從后臺生成的(當然也可以前臺生成),后面我會把生成的代碼也附上。僅參考:)
首先看一下HTML代碼結構:
一開始我為了進行(選擇、未選擇)Check之前,必須先找到相應的對象。
從Html Render的結果來看,每個RadiobuttonList生成出來的Html代碼:
都是一個table,此table有三列,每列有一個type為radio的radioButton.
這樣的話,有整個生成出來的結果,就會有11個table,每個table有3個radiobutton,一共33個radiobutton.
那我們想找到table對象為ctl14,這就可以用到Jquery強大選擇器進行相應查找工作:
$("#Table1").find($("table[id=ctl14]")) 好了,我現在可以找到***個對象了,那其他table對象也就可以容易找到了。
這樣,注意的每個生成table的對象id都是以ctl開頭的,這樣的話,查找每個table的JQ – Code:
$("#Table1").find($("table[id^=ctl]")) 好了,現在我們已經找到了每個table一級了;
接下來,我只要在找每個table中radiobutton對象就可以進行(選擇、未選擇)Check了.
代碼為:
$("table[id^=ctl] input[type=radio]") 或者 $("table[id^=ctl]").find("input[type=radio]")
到這里我們所有要的對象都找到。是不是很輕松。
代碼分析:
- $("#<%= ibSubmit.ClientID%>").click(function() {
- var flag = true;
- //alert($("table[id^=ctl]").length);
- //創建一個checked的arr數組,用于存儲每個radiobutton的checked情況
- var arr = new Array;
- $("table[id^=ctl] input[type=radio]").each(function(i) {
- arr.push(this.checked);
- });
- //然后再創建一個arrTrue數組,用于過濾false的arr數組
- var arrTrue = new Array;
- $.each(arr, function(i) {
- if (arr[i] == true) {
- arrTrue.push(arr[i]);
- }
- });
- //當然也可以用grep函數,來簡化過濾arr數組操作
- //arr = $.grep(arr, function(n, i) {
- //return n == true;
- //});
- var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);
- //***,簡單一點吧,只有判斷arrTrue的長度是否為11,就可以。
- //因為是一共33個radiobutton,每3個為一組,規則又是一組中3選1, //所以全部選擇肯定有11個radiobutton被選中。
- if (arrTrue.length != groupLen) {
- flag = false;
- }
- return false;
- });
完整代碼:
- $(function() {
- $("#<%= ibSubmit.ClientID%>").click(function() {
- var flag = true;
- var arr = new Array;
- $("table[id^=ctl] input[type=radio]").each(function(i) {
- arr.push(this.checked);
- });
- arr = $.grep(arr, function(n) {
- return n == true;
- });
- var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);
- if (arr.length != groupLen) {
- flag = false;
- }
- return false;
- });
- });
***附上生成Table代碼:(兩種生成方法,JQuery版本,C#版本) – (可看可不看)
jQuery版本
- var array = ["XXXX",""XXXX","XXX"];
- $.each(array, function(i) {
- table.append("<tr><td>"+
- "<input id='cbl_" + i + "'" + " type='checkbox' title='" + array[0] + "' />" +
- "</td></tr>");
- });
C#版本
- private void DynamicCreateTable () {
- NameValueCollection titleList = ConfigurationManager.GetSection ( sectionName ) as NameValueCollection;
- { for ( int i = 0 ; i < titleList.Count ; i++ )
- { HtmlTableRow tr = new HtmlTableRow ();
- { tr.Cells.Add ( BuilderTableCell ( titleList , i ) );
- tr.Cells.Add ( BuilderTableCellWithRadio ( i ) );
- if ( i % 2 == 0 ) { tr.Style.Add ( "background-color" , "#ffc" );
- }
- }
- tbTraDemand.Rows.Add ( tr );
- }
- }
- }
- private HtmlTableCell BuilderTableCellWithRadio ( int i )
- { HtmlTableCell tc = new HtmlTableCell ();
- { tc.ColSpan = 3;
- RadioButtonList rbl = new RadioButtonList ();
- { rbl.Items.Add ( new ListItem ( "" , "1" ) );
- rbl.Items.Add ( new ListItem ( "" , "2" ) );
- rbl.Items.Add ( new ListItem ( "" , "3" ) );
- rbl.Style.Add ( "width" , "100%" );
- rbl.RepeatDirection = RepeatDirection.Horizontal;
- }
- tc.Controls.Add ( rbl );
- }
- return tc; }
- private HtmlTableCell BuilderTableCell ( NameValueCollection titleList , int i )
- { HtmlTableCell tc = new HtmlTableCell ();
- { tc.Style.Add ( "width" , "40%" );
- tc.Align = "left";
- Label lbl = new Label ();
- lbl.Text = String.Concat ( " " , titleList.AllKeys[i] );
- tc.Controls.Add ( lbl );
- } return tc;
- }
Config: AppSettings
- <configSections>
- <sectionGroup name="MarketReSearch">
- <section name="TravelReSearchTitle" type="System.Configuration.NameValueSectionHandler"/>
- </sectionGroup>
- </configSections>
- <MarketReSearch>
- <TravelReSearchTitle>
- <add key="XXXX訂" value="1"/>
- <add key="XXXX訂" value="2"/> </TravelReSearchTitle>
- </MarketReSearch>
原文標題:JQuery RadioButtonList
鏈接:http://www.cnblogs.com/RuiLei/archive/2009/09/04/1560129.html
【編輯推薦】