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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
js实现进度条的方法
Feb 13 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
如何实现小程序与小程序之间的跳转
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
服务器端解压缩zip的脚本
2006/12/22 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python 性能优化技巧总结
2016/11/01 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python自动下载图片的方法示例
2020/03/25 Python
python同时遍历两个list用法说明
2020/05/02 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
介绍一下游标
2012/01/10 面试题
局域网定义和特性
2016/01/23 面试题
职业生涯规划书怎么写?
2014/09/14 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
单位综合评价意见
2015/06/05 职场文书
幼儿园见习总结
2015/06/23 职场文书
大学班干部竞选稿
2015/11/20 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers