JQuery操作三大控件(下拉,单选,复选)的方法


Posted in Javascript onAugust 06, 2013
Radion 
<input type="radio" name="rd" id="rd1" checked="checked" value="rd1" /> 
<input type="radio" name="rd" id="rd2" value="rd2" /> 
<input type="radio" name="rd" id="rd3" value="rd3" /> 
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 
<select id="sel"> 
<option value="1" selected="selected">a</option> 
<option value="2">b</option> 
<option value="3">c</option> 
<option value="4">d</option> 
<option value="5">e</option> 
</select> 
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 
<input type="checkbox" id="ck1" name="ck" vlaue="1" checked="checked" /> 
<input type="checkbox" id="ck2" name="ck" vlaue="2" /> 
<input type="checkbox" id="ck3" name="ck" vlaue="3" /> 
<input type="checkbox" id="ck4" name="ck" vlaue="4" /> 
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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 #Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 #Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 #Javascript
jquery弹出关闭遮罩层实例
Aug 06 #Javascript
jquery批量控制form禁用的代码
Aug 06 #Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 #Javascript
intro.js 页面引导简单用法 分享
Aug 06 #Javascript
You might like
PHP基础知识回顾
2012/08/16 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php自定义分页类完整实例
2015/12/25 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js事件监听器用法实例详解
2015/06/01 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
Sanic框架安装与简单入门示例
2018/07/16 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
实习心得体会
2014/01/02 职场文书
境外导游求职信
2014/02/27 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
小学同学聚会感言
2015/07/30 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
利用Python实时获取steam特惠游戏数据
2022/06/25 Python