JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结


Posted in Javascript onJune 28, 2011

一: DropDownList
-------------------------------------------------------------------------------------------
在使用 JQuery 进行遍历操作时,
$("input").each(function(i) {
......
}
当操作对象的类型为 dropdownlist时:(备注:在firefox下DropDownList的类型为"select-one")
获得所选中的值: $(this).val(); (如果不是遍历操作时,$(this) 就替换成 $('#控件的Id') )
获取选中的文本: $(this).find("option:selected").text(); 或者 $("#控件的name option:selected").text();
获取选中的索引: $(this).get(0).selectedIndex;
二:RadioButtonList
-------------------------------------------------------------------------------------------
如果页面只有一个RadioButtonList时,可以直接用 $("input[type='radio']:checked").val() 来获得 所选中的值
如果页面有2个或多个RadioButtonList时:
第一步: 取到RadioButtonList控件的Id,设置 var objId=控件Id;
第二步:取到控件的Name, 设置 var radioName = $("input[id^='" + objId + "']").eq(0).attr('name');
第三步:取值

获得所选中的值: $("input[name='" + radioName + "']:checked").val());

获得所选中的文本: $("input[name='" + radioName + "']:checked+label").text());

三:CheckBoxList
-------------------------------------------------------------------------------------------
判断是否有选中的一个方法,objId为 CheckBoxList的 Id
目前暂时无法用js直接获得服务器控件CheckBoxList的value值,只能通过一些小技巧来实现,例如添加额外的属性
代码中 selectedText 是获得 所选中的文本值,selectedValue 是获得 所选中的值

function hasCheckedByCheckbox(objId) { 
var checkedCount = 0; 
$("input[id^='" + objId + "']").each(function() { 
// var checkName = $(this).attr('name'); 
// var selectedText = $("input[name='" + checkName + "']:checked+label").text(); 
// var selectedValue = $(this).parent('span').attr('alt'); //利用hack来实现用js获取checkboxList所选中的值,需要在<asp:ListItem 里添加一个额外的属性 alt 
if ($(this).attr('checked')) { 
checkedCount++; 
} 
}); 
return checkedCount > 0; 
}
Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
关于js类的定义
Jun 28 #Javascript
js 编程笔记 无名函数
Jun 28 #Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 #Javascript
基于jquery的回到页面顶部按钮
Jun 27 #Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 #Javascript
jquery中获取select选中值的代码
Jun 27 #Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 #Javascript
You might like
PHP单例模式与工厂模式详解
2017/08/29 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
Python2.x与Python3.x的区别
2016/01/14 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
倡导文明标语
2014/06/16 职场文书
教师节感谢信
2015/01/22 职场文书
健康教育主题班会
2015/08/14 职场文书
电台广播稿范文
2015/08/19 职场文书