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 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
JavaScript函数模式详解
Nov 07 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
脚本收藏iframe
2006/07/21 Javascript
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
初中女生自我鉴定
2013/12/19 职场文书
住房公积金接收函
2014/01/09 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
国庆节新闻稿
2015/07/17 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
spring 项目实现限流方法示例
2022/07/15 Java/Android