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 parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
详解用async/await来处理异步
Aug 28 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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维护文件系统
2006/10/09 PHP
第十三节--对象串行化
2006/11/16 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
javascript调试说明
2010/06/07 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python生成器用法实例详解
2019/11/22 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
公司员工活动策划方案
2014/08/20 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
员工工作能力评语
2014/12/31 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL