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使用手册之三 CSS操作
Mar 24 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
javascript for循环性能测试示例
Aug 07 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP 替换模板变量实现步骤
2009/08/24 PHP
php标签云的实现代码
2012/10/10 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP中比较时间大小实例
2014/08/21 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
javascript事件模型代码
2007/07/01 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
jquery获取radio值实例
2014/10/16 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python追加元素到列表的方法
2015/07/28 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
解决python 输出是省略号的问题
2018/04/19 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Python如何生成xml文件
2020/06/04 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
会计员岗位职责
2014/03/15 职场文书
人事任命通知书
2015/04/21 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
工作一年自我鉴定
2019/06/20 职场文书