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 相关文章推荐
Javascript小技能总结(推荐)
Jun 02 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
微信小程序实现消息框弹出动画
Apr 18 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
react 生命周期实例分析
May 18 Javascript
微信小程序实现锚点跳转
Nov 23 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采集时被封ip的解决方法
2010/08/29 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python如何修改装饰器中参数
2018/03/20 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
九年级语文教学反思
2014/02/04 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
白银帝国观后感
2015/06/17 职场文书
党员发展大会主持词
2015/07/03 职场文书
2016党校学习心得体会
2016/01/07 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫