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之网页换肤实现代码
Apr 30 Javascript
js opener的使用详解
Jan 11 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python函数式编程实例详解
2020/01/17 Python
Python Selenium参数配置方法解析
2020/01/19 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Python面向对象实现方法总结
2020/08/12 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
出纳工作岗位责任制
2014/02/02 职场文书
公司授权委托书范本
2014/04/03 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
植树造林的宣传标语
2014/06/23 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Redis入门基础常用操作命令整理
2022/06/01 Redis