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和DOM Interfaces来处理HTML
Oct 09 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
js常用DOM方法详解
Feb 04 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
小程序hover-class点击态效果实现
Feb 26 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 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写的带缓存数据功能的mysqli类
2012/09/06 PHP
js加解密 脚本解密
2008/02/22 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python3安装speech语音模块的方法
2018/12/24 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python 杀死自身进程的实现方法
2019/07/01 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
中学生操行评语大全
2014/04/24 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
应用心理学专业求职信
2014/08/04 职场文书
部门活动策划方案
2014/08/16 职场文书
万里长城导游词
2015/01/30 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
Redis实现短信验证码登录的示例代码
2022/06/14 Redis