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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
javascript回调函数详解
Feb 06 Javascript
vue自动化表单实例分析
May 06 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
使用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
制作美丽的拉花
2021/03/03 冲泡冲煮
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php简单获取目录列表的方法
2015/03/24 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python使用django搭建web开发环境
2017/06/09 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
大四本科生的自我评价
2013/12/30 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
JavaScript前端面试组合函数
2022/06/21 Javascript