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 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
详解JavaScript常量定义
Jan 03 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
如何用JS实现简单的数据监听
May 06 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
php中动态调用函数的方法
2015/03/16 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
jQuery live
2009/05/15 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python实现朴素贝叶斯算法
2018/11/19 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
小学生自我评价范例
2013/09/24 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
班长自荐书范文
2014/02/11 职场文书
教学评估实施方案
2014/03/16 职场文书
学习交流会主持词
2014/04/01 职场文书
2015年教研组工作总结
2015/05/04 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers