zoukankan      html  css  js  c++  java
  • 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的项目为当前选中项 
  • 相关阅读:
    Go 语言简介(下)— 特性
    Array.length vs Array.prototype.length
    【转】javascript Object使用Array的方法
    【转】大话程序猿眼里的高并发架构
    【转】The magic behind array length property
    【转】Build Your own Simplified AngularJS in 200 Lines of JavaScript
    【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
    【转】大话程序猿眼里的高并发
    php通过token验证表单重复提交
    windows 杀进程软件
  • 原文地址:https://www.cnblogs.com/muhy/p/13685899.html
Copyright © 2011-2022 走看看