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 相关文章推荐
HTTP 304错误的详细讲解
Nov 13 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
使用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
用文本文件制作留言板提示(上)
2006/10/09 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
js常用代码段整理
2011/11/30 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
pandas去除重复列的实现方法
2019/01/29 Python
django基础学习之send_mail功能
2019/08/07 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
高中自我鉴定范文
2013/11/03 职场文书
餐饮投资计划书
2014/04/25 职场文书
2014年技术部工作总结
2014/12/12 职场文书
医院保洁员管理制度
2015/08/05 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL