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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
javascript的console.log()用法小结
May 31 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JS delegate与live浅析
2013/12/21 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python批量启动多线程代码实例
2020/02/18 Python
django 读取图片到页面实例
2020/03/27 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
linux面试题参考答案(9)
2015/01/07 面试题
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
个性与发展自我评价
2014/02/11 职场文书
外出听课学习心得体会
2016/01/15 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang