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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
JavaScript日历实现代码
Sep 12 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
js实现查询商品案例
Jul 22 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
开启PHP的伪静态模式
2015/12/31 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
php中namespace及use用法分析
2016/12/06 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python lambda函数基本用法实例分析
2018/03/16 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python元组知识点总结
2019/02/18 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python 多进程队列数据处理详解
2019/12/23 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
雷蛇美国官网:Razer
2020/04/03 全球购物
C++的几个面试题附答案
2016/08/03 面试题
国际经济贸易专业自荐信
2014/06/13 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
在项目中使用redis做缓存的一些思路
2021/09/14 Redis