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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
在VUE style中使用data中的变量的方法
Jun 19 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
一个取得文件扩展名的函数
2006/10/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue中监听返回键问题
2019/08/28 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
推荐11个实用Python库
2015/01/23 Python
打包发布Python模块的方法详解
2016/09/18 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python中文编码知识点
2019/02/18 Python
Python 远程开关机的方法
2020/11/18 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
美元符号 $
2022/02/17 杂记