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表单常用验证集合
Jan 16 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
async/await地狱该如何避免详解
May 10 Javascript
微信小程序实现身份证取景框拍摄
Sep 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防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python中static相关知识小结
2018/01/02 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
解决python线程卡死的问题
2019/02/18 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python pandas生成时间列表
2019/06/29 Python
python绘制雪景图
2019/12/16 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
PHP面试题集
2016/12/18 面试题
C/C++有关内存的思考题
2015/12/04 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
高二学生评语大全
2014/04/25 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
人与自然的观后感
2015/06/18 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Python机器学习之底层实现KNN
2021/06/20 Python
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python