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中null与undefined分析
Jul 25 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
计算机相关的自我评价
2014/01/15 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
高三语文复习计划
2015/01/19 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
Python List remove()实例用法详解
2021/08/02 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang