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 相关文章推荐
一次失败的jQuery优化尝试小结
Feb 06 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 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 IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
jquery简单体验
2007/01/10 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python 运算符 供重载参考
2009/06/11 Python
windows下ipython的安装与使用详解
2016/10/20 Python
简单谈谈python中的多进程
2016/11/06 Python
高效使用Python字典的清单
2018/04/04 Python
python psutil模块使用方法解析
2019/08/01 Python
Python Celery多队列配置代码实例
2019/11/22 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
会计电算化大学生职业规划书
2014/02/05 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
预备党员自我评价范文
2015/03/04 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2015年英语教学工作总结
2015/05/25 职场文书