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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
javascript的内存管理详解
2013/08/07 Javascript
js转义字符介绍
2013/11/05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
python中range()与xrange()用法分析
2016/09/21 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python实现批处理文件
2020/07/28 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
学生爱国演讲稿
2014/01/14 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
中小学生学籍证明
2014/10/25 职场文书
采购员岗位职责范本
2015/04/07 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python