zoukankan      html  css  js  c++  java
  • [开发笔记]jQuery获取radio选中项的值

     <title></title>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                //没有默认选中的情况
                //先判断radio是否有选中项,再获取选中的值
                $("#btnclick").click(function () {
                    //获取选中项的value属性
                    var chkRadio = $('input:radio[name="list"]:checked').val();
                    if (chkRadio == null) {
                        alert("没有选中项");
                        return false;
                    } else {
                        alert(chkRadio);
                    }
                });
    
                //有默认选中的情况
                //获取选中项的值,一般采用遍历的方法,判断哪一项选中,获取其value属性的值
                $("#btnclick2").click(function () {
                    var chk2 = getRadioValue("list2");
                    alert(chk2);
                });
    
                function getRadioValue(radioName) {
                    var chkRadio = document.getElementsByName(radioName);
                    for (var i = 0; i < chkRadio.length; i++) {
                        if (chkRadio[i].checked)
                            return chkRadio[i].value;
                    }
                }
    
            })
        </script>
    </head>
    
    <body>
        <div>
            <input type="radio" name="list" value="十分满意" />十分满意
            <input type="radio" name="list" value="满意" />满意
            <input type="radio" name="list" value="不满意" />不满意
            <input type="radio" name="list" value="非常差" />非常差
        </div>
        <br />
        <div>
            <input type="radio" name="list2" value="十分满意2" checked="checked" />十分满意2
            <input type="radio" name="list2" value="满意2" />满意2
            <input type="radio" name="list2" value="不满意2" />不满意2
            <input type="radio" name="list2" value="非常差2" />非常差2
        </div>
        <input type="button" value="确定" id="btnclick" />
        <input type="button" value="确定2" id="btnclick2" />
    </body>
    </html>

     演示截图:

    1.没有默认选中项的情况下,获取为null:

    2.没有默认选中项的情况下,获取选中项的value值:

    3. 有选中项的情况下,获取选中项的值:

    转载请注明出处。

  • 相关阅读:
    阿里云ECS安装sqlserver,本地无法连接问题排查思路
    1433端口无法连接(sql server 数据库无法访问问题)解决思路
    开源框架 电商参考系统
    版本控制工具 Git 只下载开源项目的某个文件夹
    VUE 在idea中的运行项目
    开源框架 Java Guns 03 数据库替换为sqlite
    SQL Server 用ip地址登录 127.0.0.1
    开源框架 UI框架
    电商 电商系统汇总
    电商 平台汇总
  • 原文地址:https://www.cnblogs.com/babycool/p/3101441.html
Copyright © 2011-2022 走看看