Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结


Posted in Javascript onApril 15, 2015

jquery取radio单选按钮的值 

$("input[name='items']:checked").val(); 

另:判断radio是否选中并取得选中的值 
 
如下所示:
function checkradio(){ 

var item = $(":radio:checked"); 

var len=item.length; 

if(len>0){ 

  alert("yes--选中的值为:"+$(":radio:checked").val()); 

} 

}

 
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关   
 
获取一组radio被选中项的值  
 var item = $('input[name=items][checked]').val();  

 获取select被选中项的文本  
 var item = $("select[name=items] option[selected]").text();  

 select下拉框的第二个元素为当前选中值  
 $('#select_id')[0].selectedIndex = 1;  

 radio单选组的第二个元素为当前选中值  
 $('input[name=items]').get(1).checked = true; 

    
获取值: 

文本框,文本区域:$("#txt").attr("value");  
多选框checkbox:$("#checkbox_id").attr("value");  
单选组radio: $("input[type=radio][checked]").val();  
下拉框select: $('#sel').val(); 

控制表单元素:   
 
文本框,文本区域:$("#txt").attr("value",'');//清空内容  

$("#txt").attr("value",'11');//填充内容 

   
多选框checkbox: $("#chk1").attr("checked",'');//不打勾  
 $("#chk2").attr("checked",true);//打勾   

 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 

单选组radio: $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项  
 
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项  

$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option   

$("#sel").empty();//清空下拉框 

    
刚开始接触jquery,很多东西不熟悉  
 
在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值 

后来终于在伟大的百度帮助下,找到了问题的原因:  
 
$("")是一个jquery对象,而不是一个dom element 
 
value是dom element的属性 

jquery与之对应的是val 
 
val() :获得第一个匹配元素的当前值。 
 
val(val):设置每一个匹配元素的值。 

所以,代码应该这样写: 
 
   
取值:val = $("#id")[0].value;  
赋值:  $("#id")[0].value = "new value";  
或者$("#id").val("new value"); 
或者这样也可以:val = $("#id").attr("value");
 

jQuery中each非常好用,常用它取代javascript的for循环
 
例如在一个function里有一个each,在each里某种条件 成立的话,就把这个function返回true或者false

function methodone(){ 

.... 

$.each(array,function(){ 

if(条件成立){ 

return true; 

} 

}); 

.... 

}

结果发现老是不对。
 
后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式
break----用return false;
continue --用return ture;
 
所以当我在each里想使用return true给这个function返回时,其实只是让each继续执行而以
连each都没有中断,所以function也就不能return了 
 
另:判断radio是否选中并取得选中的值
 
如下所示:
function checkradio(){ 

var item = $(":radio:checked"); 

var len=item.length; 

if(len>0){ 

  alert("yes--选中的值为:"+$(":radio:checked").val()); 

} 

}
Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
js简单抽奖代码
Jan 16 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
You might like
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
python pdb调试方法分享
2014/01/21 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
模范教师事迹材料
2014/02/10 职场文书
小学语文课后反思精选
2014/04/25 职场文书
书香家庭事迹材料
2014/05/09 职场文书
一般党员对照检查材料
2014/09/24 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
党员自我评价2015
2015/03/03 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
MySQL 服务和数据库管理
2021/11/11 MySQL
python游戏开发Pygame框架
2022/04/22 Python