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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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递归算法和应用方法介绍
2013/04/15 PHP
php实例分享之二维数组排序
2014/05/15 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python实现直播推流效果
2019/11/26 Python
Python中logging日志库实例详解
2020/02/19 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
学生出入校管理制度
2014/01/16 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2014年保洁工作总结
2014/11/24 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
客户付款通知书
2015/04/23 职场文书
实施意见格式范本
2015/06/05 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers