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 相关文章推荐
node+express+jade制作简单网站指南
Nov 26 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
新手入门js闭包学习过程解析
Oct 08 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写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
django的登录注册系统的示例代码
2018/05/14 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
vue+django实现下载文件的示例
2021/03/24 Vue.js
文明学生事迹材料
2014/01/29 职场文书
拆迁委托协议书
2014/09/15 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
承诺书范本
2015/01/21 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL