Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码


Posted in Javascript onOctober 12, 2011

由于Jquery的版本更新很快,代码的写法也改变了许多,以下Jquery代码适query1.4版本以上
Radio 
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
1.获取选中值,三种方法都可以:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.设置第一个Radio为选中值:
$('input:radio:first').attr('checked', 'checked');
或者
$('input:radio:first').attr('checked', 'true');
注: attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.设置最后一个Radio为选中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值:
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true');
或者
$("input[value='rd2']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value='rd2']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(index,domEle){
//写入代码
});
DropDownList
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
1. 获取选中项:
获取选中项的Value值:
$('select#sel option:selected').val();
或者
$('select#sel').find('option:selected').val();
获取选中项的Text值:
$('select#seloption:selected').text();
或者
$('select#sel').find('option:selected').text();
2. 获取当前选中项的索引值:
$('select#sel').get(0).selectedIndex;
3. 获取当前option的最大索引值:
$('select#sel option:last').attr("index")
4. 获取DropdownList的长度:
$('select#sel')[0].options.length;
或者
$('select#sel').get(0).options.length;
5. 设置第一个option为选中值:
$('select#sel option:first').attr('selected','true')
或者
$('select#sel')[0].selectedIndex = 0;
6. 设置最后一个option为选中值:
$('select#sel option:last).attr('selected','true')
7. 根据索引值设置任意一个option为选中值:
$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....
8. 设置Value=4 的option为选中值:
$('select#sel').attr('value','4');
或者
$("select#sel option[value='4']").attr('selected', 'true');
9. 删除Value=3的option:
$("select#sel option[value='3']").remove();
10.删除第几个option:
$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:
$(" select#sel option ").eq(2).remove();
11.删除第一个option:
$(" select#sel option ").eq(0).remove();
或者
$("select#sel option:first").remove();
12. 删除最后一个option:
$("select#sel option:last").remove();
13. 删除dropdownlist:
$("select#sel").remove();
14.在select后面添加一个option:
$("select#sel").append("<option value='6'>f</option>");
15. 在select前面添加一个option:
$("select#sel").prepend("<option value='0'>0</option>");
16. 遍历option:
$(' select#sel option ').each(function (index, domEle) {
//写入代码
});
CheckBox

Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码

1. 获取单个checkbox选中项(三种写法):
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2. 获取多个checkbox选中项:
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
3. 设置第一个checkbox 为选中值:
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4. 设置最后一个checkbox为选中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5. 根据索引值设置任意一个checkbox为选中值:
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6. 选中多个checkbox:
同时选中第1个和第2个的checkbox:
$('input:radio').slice(0,2).attr('checked','true');
7. 根据Value值设置checkbox为选中值:
$("input:checkbox[value='1']").attr('checked','true');
8. 删除Value=1的checkbox:
$("input:checkbox[value='1']").remove();
9. 删除第几个checkbox:
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10.遍历checkbox:
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
11.全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
12.全部取消选择:
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});

Javascript 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
jquery实现数字输入框
Feb 22 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
element跨分页操作选择详解
Jun 29 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 #Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 #Javascript
namespace.js Javascript的命名空间库
Oct 11 #Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 #Javascript
jquery.tmpl JQuery模板插件
Oct 10 #Javascript
brook javascript框架介绍
Oct 10 #Javascript
jQuery 一个图片切换的插件
Oct 09 #Javascript
You might like
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
浅析Python中的多重继承
2015/04/28 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python爬虫之自制英汉字典
2019/06/24 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python中shell执行知识点
2020/05/06 Python
SQL SERVER面试资料
2013/03/30 面试题
电脑教师的自我评价
2013/12/18 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
贷款承诺书范文
2014/05/19 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Pandas数据类型之category的用法
2021/06/28 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
win sever 2022如何占用操作主机角色
2022/06/25 Servers