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使用技巧精萃[代码非常实用]
Nov 21 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 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
Protoss魔法科技
2020/03/14 星际争霸
资料注册后发信小技巧
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
浅谈Vue.js
2017/03/02 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python对象属性自动更新操作示例
2018/06/15 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
服装厂厂长职责
2013/12/16 职场文书
国际贸易专业求职信
2014/06/04 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2015年党建工作总结
2015/03/30 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年女工委工作总结
2015/07/27 职场文书
放假通知怎么写
2015/08/18 职场文书