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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
文字幻灯片
2006/06/26 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JsRender for object语法简介
2014/10/31 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
python实现数独算法实例
2015/06/09 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
详解python中的Turtle函数库
2018/11/19 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
python操作gitlab API过程解析
2019/12/27 Python
python如何实现word批量转HTML
2020/09/30 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
如何安装ruby on rails
2014/02/09 面试题
银行职员思想汇报
2013/12/31 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
python基础之函数的定义和调用
2021/10/24 Python