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 自动完成脚本整理(33个)
Oct 20 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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
php简单提示框alert封装函数
2010/08/08 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
EsLint入门学习教程
2017/02/17 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
JavaScript实现多个物体同时运动
2020/03/12 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
低碳环保标语
2014/06/12 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript