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 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
react-router实现按需加载
May 09 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 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数据类型转换
2014/01/09 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
Opacity.js
2007/01/22 Javascript
javascript date格式化示例
2013/09/25 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python异常学习笔记
2015/02/03 Python
详解Python中的文本处理
2015/04/11 Python
Python文件处理
2016/02/29 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Python学生信息管理系统修改版
2018/03/13 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python实现logistic分类算法代码
2020/02/28 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
客户经理岗位职责
2013/12/08 职场文书
房地产广告策划方案
2014/05/15 职场文书
邹越演讲观后感
2015/06/15 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
python数字图像处理:图像简单滤波
2022/06/28 Python