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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
React Router基础使用
Jan 17 Javascript
jQuery设计思想
Mar 07 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 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
我的php学习笔记(毕业设计)
2012/02/21 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
革命先烈的英雄事迹材料
2014/02/15 职场文书
水毁工程实施方案
2014/04/01 职场文书
遗产继承公证书
2014/04/09 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
2015年药店工作总结
2015/04/20 职场文书
介绍信格式样本
2015/05/05 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android