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函数定义方法实例详解

    这篇文章主要介绍了JavaScript函数定义方法,结合实例形式较为详细的分析了javascript函数的声明、定义、调用等原理与常见操作技巧,需要的朋友可以参考下
    2019-03-03
  • 获取JavaScript异步函数的返回值

    获取JavaScript异步函数的返回值

    本文给大家分享的是如何解决获取JavaScript异步函数返回值的经历及最后的解决方法,有需要的小伙伴可以参考下
    2016-12-12
  • 正则表达式优化JSON字符串的技巧

    正则表达式优化JSON字符串的技巧

    这篇文章主要介绍了正则表达式优化JSON字符串的技巧的相关资料,需要的朋友可以参考下
    2015-12-12
  • Javascript变量作用域详解

    Javascript变量作用域详解

    这篇文章主要是对Javascript变量作用域进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • javaScript给元素添加多个class的简单实现

    javaScript给元素添加多个class的简单实现

    下面小编就为大家带来一篇javaScript给元素添加多个class的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript的onchange事件与jQuery的change()方法比较

    javascript的onchange事件与jQuery的change()方法比较

    本来是想添加文本框文本内容改变事件动作的,结果找了许多这方面的javascript代码都不如意。
    2009-09-09
  • javascript实现控制文字大中小显示

    javascript实现控制文字大中小显示

    网页上可以自由改变字体大小是个非常有助于用户体验的小功能,现在许多网站上都有此功能,今天我们来简单实现下。
    2015-04-04
  • 微信小程序实现经典window扫雷游戏

    微信小程序实现经典window扫雷游戏

    这篇文章主要为大家详细介绍了微信小程序实现经典window扫雷游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JavaScript实现动态表格的示例代码

    JavaScript实现动态表格的示例代码

    动态表格是指在网页上显示的数据表格,可以根据用户输入或页面元素的变化动态更新内容,本文主要介绍了JavaScript实现动态表格的示例代码,感兴趣的可以了解一下
    2024-04-04
  • JS+Canvas实现贪吃蛇小游戏

    JS+Canvas实现贪吃蛇小游戏

    这篇文章介绍了JS+Canvas实现贪吃蛇小游戏,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01

最新评论