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图片轮换效果的函数
Sep 28 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
Opacity.js
2007/01/22 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
json字符串对象转换代码实例
2019/09/28 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python 3中的yield from语法详解
2017/01/18 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python实现报表自动化详解
2017/11/16 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python程序控制语句用法实例分析
2020/01/14 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
质量保证书怎么写
2015/02/27 职场文书
公司年夜饭通知
2015/04/25 职场文书
教育教学工作反思
2016/02/24 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Django如何与Ajax交互
2021/04/29 Python
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript