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中的对象创建 实例附注释
Feb 08 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 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
Zerg剧情介绍
2020/03/14 星际争霸
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP中each与list用法分析
2016/01/08 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
js倒计时显示实例
2016/12/11 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python导入pandas具体步骤方法
2019/06/23 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python常用运维脚本实例小结
2020/02/14 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
领导的自我鉴定
2013/12/28 职场文书
西式结婚主持词
2014/03/14 职场文书
城管综合整治方案
2014/05/01 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers