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 批量上传图片实现代码
Jan 28 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 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
10个实用的PHP代码片段
2011/09/02 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
js比较日期大小的方法
2015/05/12 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
详解python算法之冒泡排序
2019/03/05 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
百年校庆节目主持词
2014/03/27 职场文书
认购协议书范本
2014/04/22 职场文书
小学总务工作总结
2015/08/13 职场文书
合作意向书范本
2019/04/17 职场文书
工作一年自我鉴定
2019/06/20 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
基于Python实现西西成语接龙小助手
2022/08/05 Golang