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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
jquery foreach使用示例
Sep 12 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 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模板中出现空行解决方法
2011/03/08 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python3.7 sys模块的具体使用
2019/07/22 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
python中return如何写
2020/06/18 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
PHP笔试题
2012/02/22 面试题
竞职演讲稿范文
2014/01/11 职场文书
培训通知书模板
2015/04/17 职场文书
海上钢琴师观后感
2015/06/03 职场文书
紧急迫降观后感
2015/06/15 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis