JQuery判断radio(单选框)是否选中和获取选中值方法总结


Posted in Javascript onApril 15, 2015

先给大家分享

JQuery判断radio单选框是否选中并获取值的方法

一、利用获取选中值判断选中

直接上代码,别忘记引用JQuery包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery radio</title>

<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>

<script type="text/javascript" language="javascript">

 /*------判断radio是否有选中,获取选中的值--------*/

    $(function(){

         $("#btnSubmit").click(function(){

            var val=$('input:radio[name="sex"]:checked').val();

            if(val==null){

                alert("什么也没选中!");

                return false;

            }

            else{

                alert(val);

            }

            var list= $('input:radio[name="list"]:checked').val();

            if(list==null){

                alert("请选中一个!");

                return false;

            }

            else{

                alert(list);

            }           

         });

     });

</script>

</head>

 

<body>

<form id="form1" >

<input type="radio"  name="sex" value="男" />男

<input type="radio" name="sex" value="女" />女

<br />

<input type="radio"  name="list" value="十分满意" />十分满意

<input type="radio" name="list" value="满意" />满意

<input type="radio" name="list" value="不满意" />不满意

<input type="radio" name="list" value="非常差" />非常差

<br />

<input type="submit" value="submit"  id="btnSubmit" />

</form>

</body>

</html>

radio不能用“checked”相等来判断,只用用true来判断   

<script type="text/javascript">

        $(function () {

            $("input").click(function () {

                if ($(this).attr("checked")) {

                    alert("选中了");

                }

            });

        });

    </script>

</head>

<body>

<input type="radio"/>

</body>

</html>

二、使用checked属性判断选中

radio不能用“checked”相等来判断,只用用true来判断   

<script type="text/javascript">

        $(function () {

            $("input").click(function () {

                if ($(this).attr("checked")) {

                    alert("选中了");

                }

            });

        });

    </script>

</head>

<body>

<input type="radio"/>

</body>

</html>

三、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()); 

} 

}

四、获取一组radio被选中项的值  

var item = $('input[name=items][checked]').val();  

五、设置单选按钮被选中

$("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项  
Javascript 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
微信小程序 教程之引用
Oct 18 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Vue实现自定义下拉菜单功能
Jul 16 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
微信小程序实现图片压缩
Dec 03 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 #Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 #Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
php取出数组单个值的方法
2018/03/12 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
如何使用repr调试python程序
2020/02/28 Python
python 批量将中文名转换为拼音
2021/02/07 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
Hibernate持久层技术
2013/12/16 面试题
工商管理应届生求职信
2013/10/07 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
国际贸易实训报告
2014/11/05 职场文书
投标售后服务承诺书
2015/04/29 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
小学运动会加油词
2015/07/18 职场文书