[开发笔记]-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. 有选中项的情况下,获取选中项的值:

本文转自 酷小孩 博客园博客,原文链接:  http://www.cnblogs.com/babycool/archive/2013/05/27/3101441.html,如需转载请自行联系原作者


相关文章
|
11月前
|
关系型数据库 MySQL Docker
利用docker 开发 信息系统,python + mysql + flask + jquery
利用docker 开发 信息系统,python + mysql + flask + jquery
108 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
63 1
|
5月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
48 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
6月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
124 1
|
6月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(2)
jQuery操作元素或节点的方法 添加:append(),appendTo(),prepend(),after(),before() 删除:remove(),empty() 复制:clone(true)
53 5
|
6月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
70 0
|
6月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(3)
JSON格式数据 JSON格式数据概述
65 0
|
6月前
|
JavaScript
|
6月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
60 0