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定时器详解及实例
Aug 01 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
js创建数组的简单方法
Jul 27 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
使用JS实现简易计算器
Jun 14 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
Laravel学习教程之View模块详解
2017/09/18 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
Python实现网站注册验证码生成类
2017/06/08 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
Java程序员面试题
2016/09/27 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
商场总经理岗位职责
2014/02/03 职场文书
校运会通讯稿
2015/07/18 职场文书
卖车协议书范文
2016/03/23 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
mysql如何能有效防止删库跑路
2021/10/05 MySQL