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 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP实现数组递归转义的方法
2014/08/28 PHP
php微信公众号开发模式详解
2016/11/28 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
javascript 函数调用规则
2009/08/26 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python求最大值最小值方法总结
2019/06/25 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
继承公证书
2014/04/09 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
优秀党员个人总结
2015/02/14 职场文书
导游词之桂林山水
2019/09/20 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers