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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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与javascript对多项选择的处理
2006/10/09 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
在Django中实现添加user到group并查看
2019/11/18 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python3.9新特性详解
2020/10/10 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
寄语学生的话
2014/04/10 职场文书
施工单位安全责任书
2014/07/24 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python