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 String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
浅谈javascript的闭包
Jan 23 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php构造函数实例讲解
2013/11/13 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
详解Django中的form库的使用
2015/07/18 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python之str操作方法(详解)
2017/06/19 Python
快速了解python leveldb
2018/01/18 Python
Python实现购物车程序
2018/04/16 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python版百度语音识别功能
2019/07/09 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
python名片管理系统开发
2020/06/18 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
优秀求职信
2014/05/29 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书