jQuery中RadioButtonList的功能及用法-jquery引入

对于RadioButtonList的功能及用法，本文将从程序规则开始介绍，在后面的实例中还涉及C#生成HTML,设置Config: AppSettings等等内容。

首先介绍程序规则：

1.对以下的选择进行检查，检查是否全部选中

2，所谓的“全部选中”是指，一行中三个radiobutton必须有一个radiobutton被选中。

3. 这里一共有33个radiobutton，每三个为一组；

以下界面里面的所有元素都是从后台生成的（当然也可以前台生成），后面我会把生成的代码也附上。仅参考：）

后台生成

首先看一下HTML代码结构：

Html代码结构

一开始我为了进行（选择、未选择）Check之前,必须先找到相应的对象。

从Html Render的结果来看，每个RadiobuttonList生成出来的Html代码：

都是一个table，此table有三列，每列有一个type为radio的radioButton.

radiobuttonList生成出来的Html代码

这样的话，有整个生成出来的结果，就会有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

【编辑推荐】