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数据表格插件
Jul 17 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
编写React组件项目实践分析
Mar 04 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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分页显示制作详细讲解
2006/12/05 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
accesskey 提交
2006/06/26 Javascript
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python操作kafka实践的示例代码
2019/06/19 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
使用django实现一个代码发布系统
2019/07/18 Python
pywinauto自动化操作记事本
2019/08/26 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
市场开发与营销专业求职信
2013/12/31 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
放假通知
2015/04/14 职场文书
音乐之声观后感
2015/06/04 职场文书
php字符串倒叙
2021/04/01 PHP