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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
openlayers4实现点动态扩散
Aug 17 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笔记之:文章中图片处理的使用
2013/04/26 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
jQuery的css()方法用法实例
2014/12/24 Javascript
javascript控制台详解
2015/06/25 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
element ui table 增加筛选的方法示例
2018/11/02 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python sorted对list和dict排序
2020/06/09 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
平面设计的岗位职责
2013/11/08 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
实例详解Python的进程,线程和协程
2022/03/13 Python
MySQL transaction事务安全示例讲解
2022/06/21 MySQL