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 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
让python json encode datetime类型
2010/12/28 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python学习之os模块及用法
2020/06/03 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
管理心得体会
2013/12/28 职场文书
六查六看剖析材料
2014/02/15 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
python之基数排序的实现
2021/07/26 Python
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python