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 相关文章推荐
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
基于JS实现web端录音与播放功能
Apr 17 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
jquery插件实现图片悬浮
Apr 16 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
关于svn冲突的解决方法
2013/06/21 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python版微信红包分配算法
2015/05/04 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
浅析python redis的连接及相关操作
2019/11/07 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
财务与信息服务专业推荐信
2013/11/28 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书