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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
javascript实现数字时钟效果
Feb 06 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下 C语言对 php 扩展
2008/12/14 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP小教程之实现链表
2014/06/09 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Golang与python线程详解及简单实例
2017/04/27 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
统计岗位职责
2014/02/21 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
高三毕业感言
2015/07/30 职场文书
Python合并pdf文件的工具
2021/07/01 Python
mysql 索引合并的使用
2021/08/30 MySQL
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript