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 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python计算auc指标实例
2017/07/13 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python 制作磁力搜索工具
2021/03/04 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
珍爱生命演讲稿
2014/05/10 职场文书
校本课程教学计划
2015/01/19 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
新闻稿标题
2015/07/18 职场文书
开业典礼致辞
2015/07/29 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
MySQL数据库查询之多表查询总结
2022/08/05 MySQL