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);
            })     
 
        }

总结

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

相关文章

  • js中forEach,for in,for of循环的用法示例小结

    js中forEach,for in,for of循环的用法示例小结

    这篇文章主要介绍了js中forEach,for in,for of循环的用法,结合实例形式总结分析了js中forEach,for in,for of循环相关使用技巧与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
    2014-08-08
  • javascript实现C语言经典程序题

    javascript实现C语言经典程序题

    这篇文章主要介绍了javascript实现C语言经典程序题的解题思路,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用微信小程序API,调用微信的各种内置能力。

    使用微信小程序API,调用微信的各种内置能力。

    微信小程序如何使用小程序API,去调用微信提供的各种内置能力(即微信API)。小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
    2022-12-12
  • 用微信小程序实现计算器功能

    用微信小程序实现计算器功能

    这篇文章主要为大家详细介绍了用微信小程序实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 禁用键盘上的(全局)指定键兼容iE、Chrome、火狐

    禁用键盘上的(全局)指定键兼容iE、Chrome、火狐

    确定你是要禁用全局的还是指定控件,如果是全局的 就只要监听window.keyDown = function(event){.....} 一样一样的,感兴趣的朋友可以了解下哈
    2013-05-05
  • bootstrap suggest搜索建议插件使用详解

    bootstrap suggest搜索建议插件使用详解

    这篇文章主要为大家详细介绍了bootstrap suggest搜索建议插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 如何解决webpack-dev-server代理常切换问题

    如何解决webpack-dev-server代理常切换问题

    通常我们有一份webpack.dev.config.js使用webpack-dev-server的proxy,代理到开发服务器,来解决本地跨域问题。假如项目变大,可能需要proxy到不同环境,那么如何解决webpack-dev-server代理常切换问题,下面就一起来了解一下
    2019-01-01
  • JavaScript设计模式适配器模式实例

    JavaScript设计模式适配器模式实例

    这篇文章主要介绍了JavaScript设计模式适配器模式实例,适配器设计模式可以让彼此不兼容的功能在一块工作,有助于避免大规模的修改代码,并且易于扩展和兼容
    2022-06-06
  • javascript实现拖拽碰撞检测

    javascript实现拖拽碰撞检测

    这篇文章主要为大家详细介绍了javascript实现拖拽碰撞检测,碰撞改变颜色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论