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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
JS中==与===操作符的比较
Mar 21 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
微信小程序实现弹框效果
May 26 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
浅析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 之入门篇
2006/12/04 PHP
php5 图片验证码实现代码
2009/12/11 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
js常用DOM方法详解
2017/02/04 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python实现机器人卡牌
2019/10/06 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
商场消防管理制度
2014/01/12 职场文书
高三语文教学反思
2014/01/15 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
课题研究阶段性总结
2015/08/13 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python