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编码的几个方法详细介绍
Jan 06 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
关于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
我的论坛源代码(五)
2006/10/09 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
详解php中 === 的使用
2016/10/24 PHP
use jscript List Installed Software
2007/06/11 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
哪些是python中web开发框架
2020/06/17 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
解放思想大讨论活动心得体会
2014/09/11 职场文书
2014年学生工作总结
2014/11/20 职场文书
烟台的海导游词
2015/02/02 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
springcloud整合seata
2022/05/20 Java/Android