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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
php+js实现倒计时功能
Jun 02 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
对python字典元素的添加与修改方法详解
2018/07/06 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python3.8中使用f-strings调试
2019/05/22 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
安全生产目标责任书
2014/04/14 职场文书
法定授权委托证明书
2014/09/27 职场文书
社区敬老月活动总结
2015/05/07 职场文书
同意报考公务员证明
2015/06/17 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python