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 相关文章推荐
简单实现Vue的observer和watcher
Dec 21 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 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
最简单的PHP程序--记数器
2006/10/09 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Move.js入门
2017/02/08 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Django中间件实现拦截器的方法
2018/06/01 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python中格式化字符串的四种实现
2020/05/26 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
HTML5进度条特效
2014/12/18 HTML / CSS
高中的自我鉴定
2013/12/16 职场文书
小学毕业感言300字
2014/02/19 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
欢迎新生标语
2014/10/06 职场文书
民事上诉状范文
2015/05/22 职场文书
导游词之无锡古运河
2019/11/14 职场文书