网页前端设计

http://www.86y.org

搜索文章

JQuery判断radio是否选中并且获取选中值

用声音读出全文关注我吧
 2016/10/15 15:50:00 阅读次数:10775

一、概述:

前端经常要写一些常用的JS事件,如:获取radio选中的值,判断有没有选中,等等,说难不难,只是需要查阅即可。本篇【JQuery判断radio是否选中并且获取选中值】也是讲述一些快速容易记住的方法给大家。演示效果如下:

JQuery判断radio是否选中并且获取选中值

二、源代码及环境:

1、引用Jq库 :http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js

2、html源代码如下:

<p>请选择你的性别</p>
<p>
<label>1.<input type="radio" name="sex" value="男" />男</label><br />
<label>2.<input type="radio" name="sex" value="女" />女</label><br />
<label>3.<input type="radio" name="sex" value="保密" />保密</label></p>

基于以上html我们可如何获取radio选中的值,并判断有没有选中

3、jq实现方法:

//方法1:先获取radio的值再判断是不是为null
var val=$('input:radio[name="sex"]:checked').val();
if(val==null){
	console.log("请选择你的性别");
}
else
{
	console.log("你选择的性别是:"+val);
}

//方法2:直接用is(":checked")判断有没有选中的radio,感觉比方法一还要麻烦一点多了一步
var boolCheck=$('input:radio[name="sex"]').is(":checked");
if(boolCheck){
	console.log("请选择你的性别");
}
else
{
	console.log("你选择的性别是:"+$('input:radio[name="sex"]:checked').val());
}

完整代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>判断radio是否选中并且获取选中值-幸凡学习网</title>
    </head>
    <body>
        <p>请选择你的性别</p>
        <p>
        <label>1.<input type="radio" name="sex" value="男" />男</label><br />
        <label>2.<input type="radio" name="sex" value="女" />女</label><br />
        <label>3.<input type="radio" name="sex" value="保密" />保密</label></p>
        <button id="submit">保存</button>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            $("#submit").click(function(){
                var val=$('input:radio[name="sex"]:checked').val();
                if(val==null){
                    console.log("请选择你的性别");
                }
                else
                {
                    console.log("你选择的性别是:"+val);
                }	
            });
        });
        </script>
    </body>
</html>

三、结语:

以上主要使用jq的选择器功能,比较快捷方便,如有什么更好的建议与方法可以给我留言。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=806【JQuery判断radio是否选中并且获取选中值】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭