對于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 ( "&nbsp;&nbsp;" , 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

【編輯推薦】

1. jQuery調用WCF服務傳遞JSON對象
2. 學習jQuery必須知道的幾種常用方法
3. 用XML+XSLT+CSS+JQuery組建ASP.NET網站
4. 使用jQuery和PHP構建一個受Ajax驅動的Web頁面
5. jQuery調用WCF需要注意的一些問題