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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
js微信分享API
Oct 11 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
js实现可爱的气泡特效
Sep 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脚本的10个技巧(4)
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python计算书页码的统计数字问题实例
2014/09/26 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
经典c++面试题三
2015/07/08 面试题
主管会计岗位责任制
2014/02/10 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
大学生党性分析材料
2014/12/19 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
厉行节约工作总结
2015/08/12 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python