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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
javascript时间函数大全
Jun 30 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js密码强度检测
2016/01/07 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python实现石头剪刀布程序
2021/01/20 Python
使用python画社交网络图实例代码
2019/07/10 Python
python中dict使用方法详解
2019/07/17 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2016年校长新年寄语
2015/08/17 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
python区块链实现简版工作量证明
2022/05/25 Python