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中两种链式调用实现代码
Jan 12 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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使用codebase生成随机数
2014/03/25 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
对Python强大的可变参数传递机制详解
2019/06/13 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
PyQt5实现画布小程序
2020/05/30 Python
如何验证python安装成功
2020/07/06 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
服务员自我评价
2014/01/25 职场文书
个人近期表现材料
2014/02/11 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python