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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
vue实现动态数据绑定
Apr 28 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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数据库连接
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
理解javascript闭包
2015/12/15 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
JS中的三个循环小结
2017/06/20 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python中字符串的处理技巧分享
2016/09/17 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
django-allauth入门学习和使用详解
2019/07/03 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
自荐信格式的六要素
2013/09/21 职场文书
酒店led欢迎词
2014/01/09 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js