jQuery中RadioButtonList的功能及用法实例介绍


Posted in Javascript onAugust 23, 2013

代码分析

$("#<%= 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>"); 
});
Javascript 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
javascript 常用关键字列表集合
Dec 04 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
JavaScript中Function详解
Feb 27 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
原生js实现日期选择插件
May 21 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 #Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 #Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 #Javascript
高效率JavaScript编写技巧整理
Aug 23 #Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 #Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 #Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
详解ES6中的let命令
2020/04/05 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
如何测量vue应用运行时的性能
2019/06/21 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
python实现ping的方法
2015/07/06 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
印尼旅游网站:via
2017/11/12 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
《记承天寺夜游》教学反思
2014/02/16 职场文书
服务质量承诺书
2014/03/27 职场文书
作风建设年度心得体会
2014/10/29 职场文书
建国大业观后感
2015/06/01 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS