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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 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
PHP - Html Transfer Code
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
幼儿园大班评语大全
2014/04/17 职场文书
男性健康日的活动方案
2014/08/18 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
伏羲庙导游词
2015/02/09 职场文书
感谢信
2019/04/11 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL