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 replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
javascript数据类型验证方法
Dec 31 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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 文件扩展名 获取函数
2009/06/03 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python 处理图片像素点的实例
2019/01/08 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
饲料采购员岗位职责
2013/12/19 职场文书
初二政治教学反思
2014/01/12 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
学校后勤岗位职责
2014/02/19 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
圣诞晚会主持词
2015/07/01 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
javascript对象3个属性特征
2021/11/17 Javascript