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实现方法调用与方法触发小结
Mar 26 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
node后端服务保活的实现
Nov 10 Javascript
Vue Object 的变化侦测实现代码
Apr 15 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中与数组相关的函数
2007/03/22 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
vue过滤器用法实例分析
2019/03/15 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python优先队列实现方法示例
2017/09/21 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python相对企业语言优势在哪
2020/06/12 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
如何提高JDBC的性能
2013/04/30 面试题
优秀志愿者感言
2015/08/01 职场文书
食堂管理制度范本
2015/08/04 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python