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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
Js实现粘贴上传图片的原理及示例
Dec 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
linux iconv方法的使用
2011/10/01 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
项目实践之javascript技巧
2007/12/06 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python实现手机销售管理系统
2019/03/19 Python
Django如何将URL映射到视图
2019/07/29 Python
Python内置加密模块用法解析
2019/11/25 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Python面试题集
2012/03/08 面试题
认购协议书范本
2014/04/22 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
房屋质量投诉书
2015/07/02 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
民事纠纷协议书
2016/03/23 职场文书
辞职申请书范本
2019/05/20 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
python 模块重载的五种方法
2021/04/24 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
python中redis包操作数据库的教程
2022/04/19 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python