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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
vant实现购物车功能
Jun 29 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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解决约瑟夫环示例
2014/04/09 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Django返回json数据用法示例
2016/09/18 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
工作说明书范文
2014/05/07 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2014年应急工作总结
2014/12/11 职场文书
安全教育的主题班会
2015/08/13 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
python基于turtle绘制几何图形
2021/06/15 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis