破碎机厂家
免费服务热线

Free service

hotline

010-00000000
破碎机厂家
热门搜索:
成功案例
当前位置:首页 > 成功案例

看一看:jQuery中RadioButtonList的功能及用法

发布时间:2022-04-02 09:47:58 阅读: 来源:破碎机厂家
jQuery中RadioButtonList的功能及用法 作者:RicoRui 2009-09-04 15:50:55 开发 开发工具 这里将介绍jQuery中RadioButtonList的功能及用法,希望本文能对大家了解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]")

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

代码分析:

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

完整代码:

  1. $(function(){
  2. $("#<%=ibSubmit.ClientID%>").click(function(){
  3. varflag=true;
  4. vararr=newArray;
  5. $("table[id^=ctl]input[type=radio]").each(function(i){
  6. arr.push(this.checked);
  7. });
  8. arr=$.grep(arr,function(n){
  9. returnn==true;
  10. });
  11. vargroupLen=Math.floor($("table[id^=ctl]")拆迁评估复议向谁申请.length+1/3);
  12. if(arr.length!=groupLen){
  13. flag=false;
  14. }
  15. returnfalse;
  16. });
  17. });

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

jQuery版本

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

C#版本

  1. privatevoidDynamicCreateTable(){
  2. NameValueCollectiontitleList=ConfigurationManager.GetSection(sectionName)asNameValueCollection;
  3. {for(inti=0;i<titleList.Count;i++)
  4. {HtmlTableRowtr=newHtmlTableRow();
  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. privateHtmlTableCellBuilderTableCellWithRadio(inti)
  15. {HtmlTableCelltc=newHtmlTableCell();
  16. {tc.ColSpan=3;
  17. RadioButtonListrbl=newRadioButtonList();
  18. {rbl.Items.Add(newListItem("","1"));
  19. rbl.Items.Add(newListItem("","2"));
  20. rbl.Items.Add(newListItem("","3"));
  21. rbl.Style.Add("width","100%");
  22. rbl.RepeatDirection=RepeatDirection.Horizontal;
  23. }
  24. tc.Controls.Add(rbl);
  25. }
  26. returntc;}
  27. privateHtmlTableCellBuilderTableCell(NameValueCollectiontitleList,inti)
  28. {HtmlTableCelltc=newHtmlTableCell();
  29. {tc.Style.Add("width","40%");
  30. tc.Align="left";
  31. Labellbl=newLabel();
  32. lbl拆迁补偿标准是怎么规定的.Text=String.Concat("&nbsp;&nbsp;",titleList.AllKeys[i]);
  33. tc.Controls.Add(lbl);
  34. }returntc;
  35. }

Config:AppSettings

  1. <configSections>
  2. <sectionGroupname="MarketReSearch">
  3. <sectionname="TravelReSearchTitle"type="System.Configuration.NameValueSectionHandler"/>
  4. </sectionGroup>
  5. </configSections>
  6. <MarketReSearch>
  7. <TravelReSearchTitle>
  8. <addkey="XXXX订"value="1"/>
  9. <addkey="XXXX订"value="2"/></TravelReSearchTitle>
  10. </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需要注意的一些问题