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 版
Mar 24 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
微信小程序实现蓝牙打印
Sep 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 阴历-农历-转换类代码
2012/01/16 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
在Django的模型中添加自定义方法的示例
2015/07/21 Python
详解python时间模块中的datetime模块
2016/01/13 Python
python中学习K-Means和图片压缩
2017/11/20 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
付款承诺函范文
2015/01/21 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Java版 简易五子棋小游戏
2022/05/04 Java/Android