對(duì)于RadioButtonList的功能及用法，本文將從程序規(guī)則開(kāi)始介紹，在后面的實(shí)例中還涉及C#生成HTML,設(shè)置Config: AppSettings等等內(nèi)容。

首先介紹程序規(guī)則：

1.對(duì)以下的選擇進(jìn)行檢查，檢查是否全部選中

2，所謂的“全部選中”是指，一行中三個(gè)radiobutton必須有一個(gè)radiobutton被選中。

3. 這里一共有33個(gè)radiobutton，每三個(gè)為一組；

以下界面里面的所有元素都是從后臺(tái)生成的（當(dāng)然也可以前臺(tái)生成），后面我會(huì)把生成的代碼也附上。僅參考：）

首先看一下HTML代碼結(jié)構(gòu)：

一開(kāi)始我為了進(jìn)行（選擇、未選擇）Check之前,必須先找到相應(yīng)的對(duì)象。

從Html Render的結(jié)果來(lái)看，每個(gè)RadiobuttonList生成出來(lái)的Html代碼：

都是一個(gè)table，此table有三列，每列有一個(gè)type為radio的radioButton.

這樣的話，有整個(gè)生成出來(lái)的結(jié)果，就會(huì)有11個(gè)table,每個(gè)table有3個(gè)radiobutton，一共33個(gè)radiobutton.

那我們想找到table對(duì)象為ctl14，這就可以用到Jquery強(qiáng)大選擇器進(jìn)行相應(yīng)查找工作：

$("#Table1").find($("table[id=ctl14]")) 好了，我現(xiàn)在可以找到***個(gè)對(duì)象了，那其他table對(duì)象也就可以容易找到了。

這樣,注意的每個(gè)生成table的對(duì)象id都是以ctl開(kāi)頭的，這樣的話，查找每個(gè)table的JQ – Code:

$("#Table1").find($("table[id^=ctl]")) 好了，現(xiàn)在我們已經(jīng)找到了每個(gè)table一級(jí)了；

接下來(lái)，我只要在找每個(gè)table中radiobutton對(duì)象就可以進(jìn)行(選擇、未選擇)Check了.

代碼為：

$("table[id^=ctl] input[type=radio]") 或者   $("table[id^=ctl]").find("input[type=radio]")

到這里我們所有要的對(duì)象都找到。是不是很輕松。

代碼分析：

$("#<%= ibSubmit.ClientID%>").click(function() {   
        var flag = true;   
        //alert($("table[id^=ctl]").length);  
        //創(chuàng)建一個(gè)checked的arr數(shù)組，用于存儲(chǔ)每個(gè)radiobutton的checked情況   
         var arr = new Array;   
        $("table[id^=ctl] input[type=radio]").each(function(i) {   
               arr.push(this.checked);   
        });  
 
        //然后再創(chuàng)建一個(gè)arrTrue數(shù)組，用于過(guò)濾false的arr數(shù)組  
 
         var arrTrue = new Array;   
         $.each(arr, function(i) {   
             if (arr[i] == true) {   
                 arrTrue.push(arr[i]);   
             }   
         });  
 
         //當(dāng)然也可以用grep函數(shù)，來(lái)簡(jiǎn)化過(guò)濾arr數(shù)組操作  
 
          //arr = $.grep(arr, function(n, i) {   
         //return n == true;   
         //});  
 
 
         var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);  
 
         //***，簡(jiǎn)單一點(diǎn)吧，只有判斷arrTrue的長(zhǎng)度是否為11，就可以。  
 
         //因?yàn)槭且还?3個(gè)radiobutton,每3個(gè)為一組，規(guī)則又是一組中3選1，        //所以全部選擇肯定有11個(gè)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> 

原文標(biāo)題：JQuery RadioButtonList

鏈接：http://www.cnblogs.com/RuiLei/archive/2009/09/04/1560129.html

【編輯推薦】

1. jQuery調(diào)用WCF服務(wù)傳遞JSON對(duì)象
2. 學(xué)習(xí)jQuery必須知道的幾種常用方法
3. 用XML+XSLT+CSS+JQuery組建ASP.NET網(wǎng)站
4. 使用jQuery和PHP構(gòu)建一個(gè)受Ajax驅(qū)動(dòng)的Web頁(yè)面
5. jQuery調(diào)用WCF需要注意的一些問(wèn)題