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 相关文章推荐
js注意img图片的onerror事件的分析
Jan 01 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
前端vue如何使用高德地图
Nov 05 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三元运算符的结合性介绍
2012/01/10 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
Python分治法定义与应用实例详解
2017/07/28 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python处理“
2019/06/10 Python
python自动生成model文件过程详解
2019/11/02 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
pyqt5中动画的使用详解
2020/04/01 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
四好少年事迹材料
2014/01/12 职场文书
运动会四百米广播稿
2014/01/19 职场文书
服装采购员岗位职责
2014/03/15 职场文书
求职导师推荐信范文
2015/03/27 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
检讨书格式范文
2015/05/07 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis