Js获取单选框radio的几种方式

 更新时间:2023年12月02日 10:37:07   作者:widenstage  
这篇文章主要介绍了Js获取单选框radio的几种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Js获取单选框radio

首先编写HTML

如下:

    <form id="form1">
        <table  border="0"> 
            <tr>
                <td>年龄段:</td>
                <td>
                    <input type="radio" name="age" value="18" />小于18岁
                    <input type="radio" name="age" value="18-40" checked="checked" />18-40岁
                    <input type="radio" name="age" value="40" />40以上
                </td>
            </tr>
           <tr>
                <td>分数:</td>
                <td>
                    <input type="radio" name="score" value="60" />小于60分
                    <input type="radio" name="score" value="60-80" checked="checked" />60-80分
                    <input type="radio" name="score" value="80" />80分以上
                </td>
            </tr>
         </table>
     </form>

方法

       function readradio() {
 
            // 方法一            
            var item = null;
            var obj = document.getElementsByName("age")
            for (var i = 0; i < obj.length; i++) { //遍历Radio 
                if (obj[i].checked) {
                    item = obj[i].value;                   
                }
            }
            alert(item);
 
            // 方法二 jquery版本在1.3之前 (FF和chrome下无效)
            item = $('input[name=age][checked]').val();
            alert(item);
            
            // jquery 1.3 之后使用
            item = $('input[name=age]:checked').val();
            alert(item);
 
            // 方法三 jquery 读取多个 版本在1.3之前 (FF和chrome下无效)
            $("input[type=radio][checked]").each(function() {
                item =  $(this).val();
                alert(item);
            })
            
            // jquery 1.3 之后使用
            $("input[type=radio]:checked").each(function() {
                item = $(this).val();
                alert(item);
            })     
 
        }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Javascript中匿名函数的调用与写法实例详解(多种)

    Javascript中匿名函数的调用与写法实例详解(多种)

    js中定义函数的方式有很多种,函数直接量就是其中一种,下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法,对js匿名函数调用,js匿名函数写法相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • Js调用Java方法并互相传参的简单实例

    Js调用Java方法并互相传参的简单实例

    下面小编就为大家带来一篇Js调用Java方法并互相传参的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 一文带你探索JavaScript中斜杠的神秘世界

    一文带你探索JavaScript中斜杠的神秘世界

    斜杠可以在代码中拥有多种含义,所以在 JavaScript 编程中,处理斜杠是一项非常重要的任务,本文就来带大家一起来看看JavaScript是如何处理斜杠的
    2023-06-06
  • 基于JS实现计算24点算法代码实例解析

    基于JS实现计算24点算法代码实例解析

    这篇文章主要介绍了基于JS实现计算24点算法代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • TypeScript声明合并的多种使用方式

    TypeScript声明合并的多种使用方式

    本文主要介绍了TypeScript声明合并的多种使用方式,包括接口声明合并、枚举声明合并、类声明合并、命名空间声明合并、模块扩充声明和全局声明扩充,感兴趣的可以了解一下
    2026-05-05
  • JS加jquery简单实现标签元素的显示或隐藏

    JS加jquery简单实现标签元素的显示或隐藏

    标签元素的显示或隐藏在使用中还是挺频繁的,下面有个不错的示例,大家可以参考下,或许有所帮助
    2013-09-09
  • JavaScript实现响应式横向多级菜单的示例代码

    JavaScript实现响应式横向多级菜单的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现响应式横向多级菜单功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-06-06
  • thinkjs之页面跳转同步异步操作

    thinkjs之页面跳转同步异步操作

    这篇文章主要介绍了thinkjs之页面跳转同步异步操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 使用 bootstrap modal遇到的问题小结

    使用 bootstrap modal遇到的问题小结

    bootstrap提供了一个写好的css文件和js文件然而在使用时遇到了一下并不是很好的问题,今天在使用弹出对话框时遇到了一个这样的问题,今天小编给大家分享下使用 bootstrap modal遇到的问题小结,一起看看吧
    2016-11-11
  • JavaScript 中的replace方法说明

    JavaScript 中的replace方法说明

    JavaScript 中的replace方法说明...
    2007-04-04

最新评论