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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
webpack优化的深入理解
Dec 10 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
详解JS WebSocket断开原因和心跳机制
May 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
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
php实现登录页面的简单实例
2019/09/29 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python算法之栈(stack)的实现
2014/08/18 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
将相和教学反思
2014/02/04 职场文书
置业顾问岗位职责
2014/03/02 职场文书
企业诚信承诺书
2014/05/23 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
销售团队获奖感言
2014/08/14 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
纪录片信仰观后感
2015/06/08 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python