jQuery中RadioButtonList的功能及用法
创始人
2024-06-06 06:21:06
0

对于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]")

到这里我们所有要的对象都找到。是不是很轻松。

代码分析:

  1. $("#<%= ibSubmit.ClientID%>").click(function() {   
  2.         var flag = true;   
  3.         //alert($("table[id^=ctl]").length);  
  4.         //创建一个checked的arr数组,用于存储每个radiobutton的checked情况   
  5.          var arr = new Array;   
  6.         $("table[id^=ctl] input[type=radio]").each(function(i) {   
  7.                arr.push(this.checked);   
  8.         });  
  9.  
  10.         //然后再创建一个arrTrue数组,用于过滤false的arr数组  
  11.  
  12.          var arrTrue = new Array;   
  13.          $.each(arr, function(i) {   
  14.              if (arr[i] == true) {   
  15.                  arrTrue.push(arr[i]);   
  16.              }   
  17.          });  
  18.  
  19.          //当然也可以用grep函数,来简化过滤arr数组操作  
  20.  
  21.           //arr = $.grep(arr, function(n, i) {   
  22.          //return n == true;   
  23.          //});  
  24.  
  25.  
  26.          var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);  
  27.  
  28.          //***,简单一点吧,只有判断arrTrue的长度是否为11,就可以。  
  29.  
  30.          //因为是一共33个radiobutton,每3个为一组,规则又是一组中3选1,        //所以全部选择肯定有11个radiobutton被选中。   
  31.           if (arrTrue.length != groupLen) {   
  32.                 flag = false;   
  33.          }   
  34.      return false;  
  35.  
  36. }); 

完整代码:

  1. $(function() {   
  2.             $("#<%= ibSubmit.ClientID%>").click(function() {   
  3.                 var flag = true;   
  4.                 var arr = new Array;   
  5.                 $("table[id^=ctl] input[type=radio]").each(function(i) {   
  6.                     arr.push(this.checked);   
  7.                 });   
  8.                 arr = $.grep(arr, function(n) {   
  9.                     return n == true;   
  10.                 });   
  11.                 var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);   
  12.                 if (arr.length != groupLen) {   
  13.                     flag = false;   
  14.                 }   
  15.                 return false;   
  16.             });   
  17.         }); 

***附上生成Table代码:(两种生成方法,JQuery版本,C#版本) – (可看可不看)

jQuery版本

  1. var array = ["XXXX",""XXXX","XXX"];  
  2. $.each(array, function(i) {  
  3.          table.append(""+  
  4.                       " id='cbl_" + i + "'" + " type='checkbox' title='" + array[0] + "' />" +  
  5.                       "");  
  6. });  

C#版本

  1. private void DynamicCreateTable () {   
  2. NameValueCollection titleList = ConfigurationManager.GetSection ( sectionName ) as NameValueCollection;   
  3. {  for ( int i = 0 ; i < titleList.Count ; i++ )   
  4. { HtmlTableRow tr = new HtmlTableRow ();    
  5. {  tr.Cells.Add ( BuilderTableCell ( titleList , i ) );    
  6. tr.Cells.Add ( BuilderTableCellWithRadio ( i ) );    
  7. if ( i % 2 == 0 ) { tr.Style.Add ( "background-color" , "#ffc" );   
  8. }   
  9.  }   
  10.  tbTraDemand.Rows.Add ( tr );   
  11.               }       
  12.       }     
  13.     }        
  14.    private HtmlTableCell BuilderTableCellWithRadio ( int i )   
  15. {   HtmlTableCell tc = new HtmlTableCell ();    
  16. {  tc.ColSpan = 3;     
  17.  RadioButtonList rbl = new RadioButtonList ();    
  18.  {   rbl.Items.Add ( new ListItem ( "" , "1" ) );      
  19.  rbl.Items.Add ( new ListItem ( "" , "2" ) );    
  20. rbl.Items.Add ( new ListItem ( "" , "3" ) );    
  21.                  rbl.Style.Add ( "width" , "100%" );      
  22.                rbl.RepeatDirection = RepeatDirection.Horizontal;       
  23.           }            
  24.      tc.Controls.Add ( rbl );      
  25.        }             
  26. return tc;       }           
  27. private HtmlTableCell BuilderTableCell ( NameValueCollection titleList , int i )   
  28. { HtmlTableCell tc = new HtmlTableCell ();    
  29.          {               tc.Style.Add ( "width" , "40%" );     
  30.             tc.Align = "left";           
  31.       Label lbl = new Label ();          
  32. lbl.Text = String.Concat ( "  " , titleList.AllKeys[i] );               
  33. tc.Controls.Add ( lbl );          
  34.    }           return tc;         
  35. }  

Config: AppSettings 

  1.      
  2.           name="MarketReSearch">     
  3.   name="TravelReSearchTitle" type="System.Configuration.NameValueSectionHandler"/>            
  4.       
  5.          
  6.           
  7.               
  8.              key="XXXX订" value="1"/>     
  9.              key="XXXX订" value="2"/>                 
  10.       

原文标题: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需要注意的一些问题

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...