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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
angular中的cookie读写方法
Aug 02 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
关于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内存缓存功能memcached示例
2016/10/19 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
jquery 选取方法都有哪些
2014/05/18 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
js简易版购物车功能
2017/06/17 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
js实现批量删除功能
2020/08/27 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
单位接收函范文
2015/01/30 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书